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Introduction 


HTML And Beyond 


Imit it. You want to have a personal Web site, don’t you? Or 


lerhaps you’re running a small business, and you’d like to 


nclude a Web address on your visiting cards. And you don’t 
know how to go about it beyond the basic HTML. This book is just 
what you’re looking for! For those not familiar with basic HTML 
either, we’ve included a chapter on that subject. 

There are several elements that go into a professional-looking 
Web site, and we have here tried to cover what you’d need to build 
one. After looking at the basics of HTML, we go into JavaScript and 
PHP— after all, you don’t want any boring old static Web page, do you? 
We’ve also included material on site design tools such as Frontpage 
and Dreamweaver so you make a site with a minimum of fuss. 
Frontpage workshops have also been included. 

Content Management Systems, which make it convenient to man- 
age your Web site, have been discussed in some detail. If you’d like to 
put up a forum on your site— which in some cases is essential, and in 
some cases fun— we’ve explained how to do so, using easy-to-use tools. 

After you’ve built your site, you need to upload it (don’t forget 
that bit!) and also check for a few things— such as whether it is com- 
patible with popular browsers and so on. A chapter is dedicated to 
uploading and testing your site. Finally, we present examples of well- 
made sites and what you can learn from them— and, complementari- 
ty, what Web design mistakes to avoid. 

Web designing is a profession all by itself. So are JavaScript coding 
and PHP coding. And so also is the building of content management 
systems! We obviously cannot cover here all that you might need to 
know, but the enemy is inertia. The laziness that prevents you from 
getting started. This book is an introduction, a starting point. If you 
find Web site building is fun, you will look further and learn. 

On the whole, by the time you’ve reached the end of this book, 
you should know what you need to get a basic site up and running— 
the site you’ve been promising yourself you’d build! 
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T ype “web hosting” into Google and you get about 800 million 
hits. So who do you choose? You’ll be able to figure out once 
you’re through with this chapter! There are two aspects to getting 
your Web site online: registering a domain name and hosting the 
site on a server. This chapter will take you through the various 
aspects of domain registrations and hosting to help you make an 
informed decision. 
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1.1 Getting A Domain 


The first step to hosting your Web site is choosing your domain 
name and getting it registered. Choosing the right name depends 
on a number of factors. If you are a business with an already estab- 
lished presence, it would make sense to use your company name. 
If you’re promoting a particular product, it may be a better idea to 
use that product’s name. If it’s a personal Web site, you could use 
your own name... and so on. Some of the ground rules in choosing 
a domain name are: 

o It shouldn’t be too long 

o It should be easy to remember 

o If should not be easy to misspell the name 

Like the site name, the last part of the domain name - which 
ends in .com, .net, .org, etc. - is also important. The choice of what 
domain extension to register your site under should also be driven 
by your target audience. Registering with a .com extension is the 
default consideration. Most people associate Web site addresses 
with the .com extension. So even if they’ve heard of your company 
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in passing and want to visit your Web site, they would naturally 
try yourcompany.com first. Of course, search engines will help, 
but this point could be important in the early days of your Web 
site before you get into the search indexes. 

In addition to the .com extension, you should also consider 
registering the name in country level domains. For example, if you 
are a business based in India, the .in extension will communicate 
an intrinsic message to your web audience. It will declare that you 
are an Indian company present in India, so you are reachable by 
phone or physical address without too much difficulty. If your site 
is an e-commerce site, it would also give customers the much-need- 
ed assurance of the legality of your site. 

Domain names are valuable. You will need to have at least two 
to three possible candidates for your Web site name, as there is a 
good likelihood that most of the obvious ones are already taken. 

Also, you will need to protect your domain name. Once your 
site crosses a threshold of popularity you can become easy targets 
for me-too Web sites trying to ride on your success. Unscrupulous 
punters will attempt to lure your customers away with underhand 
tactics: say you’ve registered your site as mysite.com and mysite.in. 
These scam artists will register mysite.org and mysite.net and host 
mock Web sites that look exactly like yours. In many cases, cus- 
tomers will be tricked into parting with their money with nothing 
to show for it. The ill will, though, will be entirely directed 
towards you! Protecting your name by registering it under as many 
top-level and country-level domains as you possibly can is neces- 
sary to protect your online brand. 

Having decided on the possible names for your Web site, the 
next step is to find a domain registrar. Many hosting companies 
include domain name registration as part of their hosting pack- 
ages. It may seem simpler to use their service; however, it could 
become a potential bottleneck if you want to switch hosting com- 
panies later on. The administrator account for the domain regis- 
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tration will default to the hosting company, and getting that infor- 
mation out would be like pulling out a tooth. Since you are dump- 
ing them and moving to another host, they will feel less than 
obliged to provide you with the necessary information in a timely 
manner. 

Among domain registrars for international domains such as 
.com and .org, godaddy.com provides some of the best prices 
you can find. At around $7 (about Rs 350) per year, the registra- 
tion process is completely transparent and under your control 
at all times. 

The story on .in domains, though, is murky. Indian registrars 
are known to use sleazy tactics like changing your address to 
theirs and then asking for more money to change it back. Be care- 
ful when buying .in domains. Take the extra step of confirming 
the terms with a human contact before paying. Be specific and ask 
for guarantees that you have complete control over your domain 
name. You should have full administrator control and you should 
be able to directly update all details related to your domain. If the 
answers you receive are evasive, or if they cite some sort of techni- 
cal difficulties or hide behind that great excuse called “for securi- 
ty reasons," you can be almost certain that you will face a lot of 
trouble when attempting to update/change your records. 
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1.2 Securing Web Hosting 


Before choosing a hosting provider you have to determine what 
your needs are. For a start-up Web site, this might not be very 
clear, but you will have some idea about the kind of services you 
plan to offer your audience. There are a number of elements you 
need to be clear about before shopping around for a Web host. 
These include the type of site, the kind of database(s) required, spe- 
cial software such as chat, bulletin boards and shopping carts, the 
average number of visitors you expect, the number of e-mail users 
who will use your domain address, and the server side technology 
used for your site. 

Each of these elements will determine your choice of Web host. 
The first choice you have to make is whether your Web site will sit 
on a shared server or a dedicated box. A shared server, as the name 
indicates, is a single physical server that will be hosting tens or 
even hundreds of other Web sites alongside yours. On the other 
hand, on a dedicated server, the entire machine is allocated to 
your Web site. An extension of the dedicated server is co-location. 
Unlike dedicated servers, a co-located server is owned by you. The 
Web hosting provider will provide a pipe to the Internet and your 
server will be connected to the Web. 

There are advantages and disadvantages with each of these 
options. Let’s take a look at each. 

1.2.1 Shared Hosting 

The main attraction associated with shared hosting is cost. For a 
fraction of the cost of a complete server, you can have a fully-func- 
tional Web site up and running in no time. Most hosting providers 
provide online setup and configuration of your accounts. This 
should have you ready to upload your site files within 10 minutes 
of paying up. Competition is fierce in the shared hosting market, 
so hosting providers trip over themselves to offer you a smorgas- 
bord of features hoping to attract you into signing up. Don’t get 
overawed by the feature list. Many of these features will have fine 
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print exclusion clauses that may make it unworkable in some con- 
texts. For example, your Web site may be heavily dependent on 
PHP scripts. Scripts are computing-intensive tasks and may con- 
sume a lot of processor resources. The provider may have a policy 
that limits hogging of the processor. Another example is the band- 
width (the total amount of data sent and received) a site can use. 
Be wary of those who offer unlimited bandwidth. They will pro- 
vide no guarantees that your site will be accessible during peak 
traffic loads. 

That said, shared hosting is the best choice for a low- to medi- 
um-traffic Web sites. Sites such as Yahoo! Web Hosting are really 
stretching the meaning of what is meant by low traffic, with their 
500 GB of data transfer per month. That gives you the capacity to 
handle over 1 million visitors a month. By the time you reach even 
half that magic number, however, other factors will prompt you to 
get your own server. 

The real disappointment is the pathetic offers from Indian 
Web hosting companies. Astronomical prices for less than half the 
features of international hosting companies, and bad to indiffer- 
ent customer support are some of the ills that plague this indus- 
try. While we’d love to be patriotic and recommend a decent 
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Indian domain registrar and Web hosting hero, the sad fact is we 
are yet to find one. 

1.2.2 Dedicated Server / Co-location server 

Dedicated servers give you exclusive use of a single server machine 
to host your Web site. While they are more expensive, dedicated 
servers might make more sense if you are hosting sensitive data 
and/or have high volume traffic. Since there are no other Web sites 
on your machine, you can make full use of the entire resources of 
the server without fear of suffering from performance issues. Of 
course, beyond a certain load you would need to upgrade your 
server to ensure consistency in performance. 

A dedicated server, in effect, is rented out from the hosting 
provider. When shopping around for one, make sure its specifica- 
tions are suited to your Web site’s requirements. Some hosts only 
provide a barebones machine with just the operating system (usu- 
ally Windows or Linux). You would need to procure and install all 
the software and databases. Many have bundled offers where they 
provide a default set of software that can be hacked to suit your 
requirements. They would include: chat, bulletin boards and shop- 
ping card software, support for VoIP applications, support for 
Flash, and so forth. 

A co-located server on the other hand is one that you own and 
which is placed in the data centre premises of the hosting provider. 
You can load any and all software that you require, and the host’s 
responsibility is to ensure that your server remains constantly pow- 
ered on while providing you with the agreed-upon bandwidth. 

Dedicated server pricing can vary widely, and depends on the 
server configuration, the level of technical support and other fac- 
tors, which differ from host to host. 

1.2.3 How to choose a Web host 

Choosing a Web host is one of the most important decisions you 
will make. Generally, the hosting provider should be able to give 
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you full control over your account (on a shared server) or your serv- 
er. There should preferably be a Web-based administration inter- 
face that will enable you to directly make configuration changes 
to your site without needing to call technical support. You will 
need to invest time and effort in choosing a host that will be able 
to fulfil if not exceed your needs. 

Once you’ve determined the technical requirements of your 
Web site, run a search for hosting companies with your core 
requirements. For example, if your site depends a lot on Flash ani- 
mation, your search term could be “flash support web hosting." 
Narrow the selection down to four or five providers that fit with- 
in your need and price band. 

The next step is to search for any adverse news/comments on 
these Web hosts. Many Webmasters maintain blogs detailing their 
hosting experiences. Reviewing their feedback will help you in 
avoiding sleazy and second-rate hosts. A good tool to search blogs 
is http://blogsearch.google.com. Just include the hosting provider’s 
name in your search terms to get links to the rants and raves of 
your potential Web host! 

One fact that you need to verify is the strength of the 
provider’s technical support. Most good hosting providers will 
have support personnel available 24x7 both via chat and e-mail. 
They should specify SLAs (Service Level Agreements) on their 
response times and should have sufficient skills to troubleshoot 
any problem you might have with the server or your account. 
Don’t expect them to troubleshoot your Web site, though. If your 
chosen host does not provide detailed information about their 
technical support on their Web site, you’ll need to write them ask- 
ing them for details such as those about response times. Evasive 
answers, too glib replies like “don’t worry, we’ll handle it” are 
warning flags. 

Also, it is a good idea to maintain complete and up-to-date 
offline backups of all the data and content on your Web site. This 
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will enable you to quickly switch hosts if you find your current 
host unsatisfactory. All you need to do is set up the new site, 
change the DNS pointers in your domain name, wait for a few days 
for the propagation (of the new IP address for your Web site) to 
take effect, and you’ll be good to go. 


1.3 Free Domains / Web sites 


For those of you still undecided 
about spending money on setting 
up your own Web site, there is 
still the option of going in for a 
free site. Free sites have some lim- 
itations. Your site will be a sub- 
domain of the free site provider. 

Geocities (geocities.yahoo.com) 
and Google Page Creator 
(pages.google.com) are good 
examples of free Web site 
providers. Other than the “top- 
drawer” names, there are literally 
hundreds of companies that pro- 
vide free hosting. The catch, 
though, is that they will reserve 
space on your screen to serve 
advertising banner ads and other 
links. Also, they might disable 
certain features that are processor intensive, and only allow you to 
have limited interactivity on the site. 

If you are new to Web page design and not too keen on getting 
your fingers dirty by delving into HTML coding, most of these free 
Web sites (as also the paid sites) offer template-based WYSIWIG 
(What you see is what you get) interfaces that enable you to design 
your Web site using nothing more than your mouse and keyboard. 



Geocities Control Panel 
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You can choose from themes and colour combinations that can 
give you a fully-functional (even if with limited capabilities) Web 
site in an hour or so. 

1.4 Ready-Made Web Sites 


As the Internet evolves into a vehicle for social interaction, main- 
taining online journals or blogs is getting increasingly popular. 
Blogs are evolving into alternative sources of information that 
bypass mainstream media to engage directly with the audience. 
Many bloggers have acquired personal fan followings that can 
rival those of cine stars! 


1.4.1 Blogs 

The ease of personal publishing 
that blog and analogous sites 
offer makes it irresistible to 
many. As with Web sites, there are 
two options you can go with: get a 
paid blogging site or go for a free 
one. Blogging software come in 
many shades and flavours; two of 
the most popular ones are 
Movable Type and WordPress. 

While WordPress is free and open 

source, you will have to buy a license to use Movable Type. Both 
these software have their relative merits, but the bottomline is 
that you can host them on your own server customised to suit your 
requirements. 



WordPress Home Page 


Free blogging sites such as 
blogger.com and rediffblogs.com 
remove the technical hurdles and 
allow you to start blogging right 
away after a simple sign-up 
process. You can change the look 
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and feel of your blog to suit your style and personality, and add 
advertising banners and affiliate links that can provide some addi- 
tional revenue. 


Of course, advertising is also possible on paid blog sites. The 
only difference between hosting your own blog and using a free 
host is the level of control you have over the look and feel and pres- 
entation style. 


1.4.2 Photo Blogs 

Photo bloggers are the next step 
in the blogging evolution. With 
the ubiquity of the digital camera 
and camera phones, taking pic- 
tures has almost become a reflex 
action. Sites such as Flickr.com 
and Photobucket.com allow you 
to host your images for free with 
basic features, and for a fee with 
advanced features. You can make 
your pictures public, keep them private, or share them with select 
friends. 


Flickr Home Page 


1.4.3 Personal Portals 

What happens when you mash up 
content blogs with photo blogs? 

You get sites such as Yahoo 360o 
(360.yahoo.com), My Space 
(myspace.com) and Multiply (mul- 
tiply.com). The premise of these 
sites is that it is no longer just 
about text or photos. The digital 
persona should encompass every 
aspect of a person’s social life, 
enabling them to publish blogs, photos, videos, music and more, 
while at the same time connecting them with friends and peers 
via a seamless interface. 


ttx mULTIPLV 

One Site Fm Everything (Step 1 of S) 




Multiply - One Site for Everything 
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HTML 



H ypertext Markup Language or HTML is the basis for all Web 
pages. For those of you who want more control over the layout 
and design of your Web pages, HTML is the way to go. Compared to 
regular programming languages, HTML is fairly easy to learn and 
simple to use. 
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While you can use HTML code editors and WYSIWYG editors to 
built your HTML pages, it is recommended that you start off with 
hand coding to get an in-depth understanding of the way HTML 
works. Once you’re fairly confident of your HTML skills, you can 
then go ahead to use advanced editing tools. HTML only requires a 
simple text editor to start coding. Do take the time to work 
through the sample code included in this section to get a hands- 
on feel on working with HTML. 

2.1 Basic Formatting Using HTML 


An HTML file contains “markup tags” that tell the Web browser 
how to follow the instructions enclosed within the tags. The angu- 
lar brackets “<” and “>” indicate that the text within the brackets 
is a tag. The start of the tag and the end of the tag are identified 
using special formats. For example, <p> indicates the start of a 
new paragraph, and </p> indicates the end of the paragraph. 
Regular text, or other instructions depending on the tag type, is 
enclosed between the starting and ending tags. Tags are not case 
sensitive, that is, <p> and <P> mean the same thing. 

Each tag can have attributes. These provide additional format- 
ting and other information regarding the tag. For example, the 
<body> tag can have an attribute to specify the background colour 
of the Web page. <body bgcolor=”blue”> will render the Web page 
with a blue background. 

Every HTML document starts with the <html> tag indicating to 
the Web browser the start of the HTML document, and ends with 
the </html> tag, which indicates the end of the document. A basic 
HTML document looks like this: 


<html> 


<head> 

<title>My first HTML page</title> 
</head> 
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<body> 

This is my first homepage. 
bold</b> 

< /body> 

</html> 


<b>This text is 


X •© CJ |u fite://>^:A*r%2lI>ocuroeriWAbey/Artrte«^ 

*2»**ne* zl 1 G 

Tksi is my first homepage This text is bold 



The first HTML Page 


The <head> tags indicate header information, or information 
that is not displayed in your page. The <title> tags enclose the text 
that will appear in the caption bar of your Web browser. The text 
between the <body> tags will be displayed in your browser win- 
dow. <b> and </b> indicate to the Web browser that all text 
between this tag pair should be bold. To see the above code action, 
type it out in a text editor like Notepad and save it as a .html or 
.htm file. Then open the file in your browser to see the results. 

Other than the above, other basic tags are headings, para- 
graphs, line breaks, links, emphasis and lists. 

There are six levels of headings in HTML. They start with the 
<hl> </hl> tag pair and go up to the <h6> </h6> pair. You should 
use <hl> </hl> for the most important heading in your site, and 
<h2> </h2> for a sub-head, and so on. For example: 


<hl>Important heading</hl> 

<h2>Less important heading</h2> 

- - - - -..-.titG/r.rWO »,!•»*•• 3 

MyttstHTM pap L vy first HTMl page | 

Hut 15 my first home/, we Tlus text is hold 

Important heading 

I imnnrlant ln :nl i no 

Headings and their weights 
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and so on. 

The <p> and </p> tags enable you to specify the paragraph 
breaks in your text. You can use as many of these tags as you 
need. 

<p> Paragraph one </p> 

<p> Paragraph two </p> 

Thu u my first homepage This text is bold 

Important heading 

Less important heading 

Paragraph coe 
Paragraph two 

Paragraphs 


The <br> and </br> tags introduce line breaks when you want 
to start a new line and not a new paragraph. Thus, 


<p>Para three broken into<br>two 
lines</brx/p> 

will print the text in two lines. 

^ ^ J ^ Ctl I tHe://^:^v^2CO«unients/At^/Aru;te«/C1qlVttweMe$i9r<ri2^<9t%a>to«ieK 

Thir k my first homepage This test is bold 

Important heading 

Less important heading 

Paragraph one 

Paragraph two 

Para three broken into 
two lines 

Breaking paragraphs into lines 
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The <em> tag adds emphasis to words. 

We need to <em>emphasise</em>this . 

Important heading 

Less important beading 

Paragraph one 

Paragraph two 

Para three broken into 

two kies 

Putting emphasis on certain words 

To link to a different site or page you use the <a> tag. If you 
have a file called digit.html in a folder called ‘Digit’ and you want 
to link to this from your home page, the resulting code would look 
like this: 


<a href = "Digit/digit . html" >Digit Page</a> 


This code will display the text “Digit Page”, usually in a blue 
font, and underlined to indicate a link. To specify a link to anoth- 
er Web site you substitute the file name with the site’s URL. 


<a href="http : //www. thinkdigit . com/" >Digit 
Home Page</a> 


HTML supports 
three kinds of lists. A 
bulleted or 

unordered list uses 
the <ul> and <li> 
tags. A numbered or 
ordered list uses the 
<ol> and <li> tags. 
And a definition list 


Less important heading 

Pajaytapb one 

Paragraph two 

Pat a tbiee broken into 
two kies 

We need to tmfJtasue this. 

d»»ip«« 


Creating Hyperlinks 
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lists terms and their definitions by using the <dl>, <dt> and <dd> 
tags. 

A bulleted list: 


<ul> 

<li>list 

item one</li> 

<li>list 

item two</li> 

<li> list 

item three</li> 

</ul> 

A numbered 

list : 

<ol> 

<li>list 

item l</li> 

<li>list 

item 2</li> 

<li>list 

item 3</li> 

A 

0 
1— 1 

V 


A definition list: 


<dl> 

<dt>term one</dt> 
<dd>def inition for 

term 

one</dd> 

<dt>term two</dt> 

<dd>def inition for 

term 

two</dd> 

<dt>term three </dt 

> 


<dd>def inition for 

term 

three</dd> 

</dl> 
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Hus is my first homepage This text is bold 

• list item «ie 

• fist item two 

• list item three 

1 list item 1 
2. list item 2 
3 list item 3 

termooe 

definition for term one 
term two 

definition for term two 
term three 

definition for term dree 


The Bulleted, Ordered and Definition lists 


All these tags can be combined and nested and used in power- 
ful ways to make a richly-formatted document. Other tags enable 
you to manipulate the layout and design of the Web page to a 
great extent. 

Also, if you wish to insert developer comments into your Web 
pages, you would use the comment tag: 

<!- Insert comment here -> 
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2.2 Images 


To add an image to your Web page, you use the <img> tag and spec- 
ify a location to pick up the image file from. 

<img src="images/image . jpg" width="200" 

height="150" alt="Just an image"> 

The ‘src’ (source) attribute tells the browser to get the image 
file image.jpg from the ‘images’ folder for the Web site, and that 
it should be displayed in a 200 x 150 pixel area. While the image is 
being loaded, the “alt” (alternate) attribute informs the browser to 
display the text “Just an image”. 

You can also make a clickable link: 


<a href = "/" ximg src= "logo . gif " alt="home 
page" ></a> 

This tells the Web browser that the image file “logo.gif” is 
clickable, and any click on the logo image should be directed to 
the home page (the symbol). 


■ =■'' ' r ■ ■> Q I _I life :M^0C l &3.irYentfi/ A ibey/Ar 

TLs h ray first hmifip-age IMs rerfis o I d 


My ijidjd JNmsh 


k I 

ALT text in images 
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2.3 Tables 


Tables are defined using the <table> tag. Rows are defined with 
the <tr> tag and each column is divided into data cells with the 
<td> tag. Headings in a table are defined using the <th> tag. While 
you may specify a table without any borders, depending on your 
layout requirements, you can use the border attribute to specify 
the thickness of the border. 


•ctable border="l"> 
<tr> 

<th>Heading l</th> 
<th>Heading 2</th> 
</tr> 

<tr> 

<td>row 1, 

<td>row 1, 

</tr> 

<tr> 

<td>row 2, 

<td>row 2, 

</tr> 

< / table> 


cell l</td> 
cell 2</td> 


cell l</td> 
cell 2</td> 
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2.4 Cascading Style Sheets (CSS) 


Once your Web site grows beyond a few pages, you will want to 
maintain a consistent look and feel across all pages with consis- 
tent formatting, design and layout. The trouble starts when you 
have to change one single element in your format and want it 
replicated across all your Web pages. Updating each page manual- 
ly can get tedious if you have 20-odd pages, and a Herculean task 
if you have 100 pages or more. 

Cascading Style Sheets or CSS enable you to separate the con- 
tent of your HTML documents from the presentation. A single file 
or a small group of files could define the presentation format for 
your entire Web site. Thus, any format or presentation changes 
required across the Web site would be controlled through these 
CSS files. 

For style sheets to work, it is important that your HTML is 
error-free. You can use the HTML Tidy tool (http://tidy.source- 
forge.net) to automatically fix errors as well as tidy up the markup 
for easier reading and editing. 

2.4.1 The Basics 

To define styles, you use the <style> element. To define properties 
for the documents, you specify the attributes for the document 
tags within the <style>. When defining the style for a template 
HTML file, the style element is placed within the document 
<head> and not the <body>. 

<html> 

<head> 

<title> Document Title </title> 

<style type="text/css"> 
body { color: black; background: white; } 

</ style> 

</head> 

<body> 
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Document Content comes here 

< /body> 

</html> 

Between <style> and </style>, a special notation for style rules 
is used. Each document tag name is defined and a list of style prop- 
erties for each is specified between the curly braces. In this exam- 
ple, the <body> tag has been given the property of a white back- 
ground with black text. Defining the style of the <body> tag sets 
the basis for the rest of the style definitions. 

The definition format for the style property is stylepropertyl : 
value; styleproperty2: value; and so on. Note the use of colons and 
semi-colons to separate one property from the next. 

2.4.2 Using A Separate Style Sheet 

To use the same style for several different Web pages, you should 
create a separate style sheet and then link the sheet from each 
page where you want the style to be applied. 

<html> 

<head> 

<title> Document Title </title> 

<link type= "text/css" rel= "stylesheet" 
href = "style . css" > 

< /head> 

<body> 

Document content comes here 

< /body> 

</HTML> 


As you can see from the code, the file “style.css” is referred to 
in the document <head> with the “rel” attribute set to 
“stylesheet”, and the type attribute set to “text/css”. This tells the 
browser to use the file “style.css” to apply the style format to the 
current document. 
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Not only can you refer to an external style sheet, you can also 
specify additional page-specific style elements in the same HTML 
file. Below you will see an example of an alternate style sheet 
coded into a Web page: 

/* style. css— a simple style sheet */ 

body { 

margin- left: 15%; margin-right: 15%; 
color: blue; background: white; 

} 

This tells the browser that this page has a margin on the left 
and right that totals 15 per cent of the page width, has a text 
colour of ‘blue’ on a ‘white’ background. 


• T 4 j | fl t : l! IF- : iM)f H^OCooj mcnt /ahcy/irtt tc-./dq 


This is my first tamepagy. This text is bald 


Heading 1 Heading! 

yew 1. ctfl 1 row 1. ccB 2 1 


row 2. cell ] jrw 2, cel 2 


A CSS formatted page 


2.4.3 Fine-grained Control Of Your Formatting 
There are a number of style properties that can be used to estab- 
lish fine-grained control over your formatting. The “margin-top” 
and “margin-bottom” properties specify the margin space above 
and below the document. For example, you can use these in con- 
junction with the headings property to control the space above 
and below each heading. 
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hi { margin-top: 3em; margin-bottom: 2em; } 

The “em” unit is relative to the size of the font. One em equals 
the height of the font. In this example, all hi headings will have a 
top margin three times the height of hi and a bottom margin 
twice the height of hi. 

Style sheets make it particularly easy to control font size and 
styles. While you cannot control the fonts available in all the 
browsers that view your pages, you can set a preferred order for 
several fonts. 

body { font-family: Verdana, sans-serif; } 

hl,h2 { font-family: Garamond, "Times New 

Roman", serif; } 

In the above example, Garamond is preferred for important 
headings, failing which it will use ‘Times New Roman’, and if that 
is unavailable, it will default to the available serif font. Verdana 
would be used for paragraph texts, and if that is unavailable, it 
will use the default sans-serif font. 

Similarly, you can set style properties for borders, margins and 
colour. For an in-depth tutorial on using CSS, visit www.yourhtml- 
source.com/stylesheets/. 

When using style sheets (and general HTML) you should 
remember that not all browsers respond in a similar manner. 
Hence, what may be rendered exactly as you wish in one browser 
may get totally skewered in another. This, of course, means that 
you will need to test and retest each of the changes in as many 
browsers as possible. While that may be practically impossible, you 
should at the minimum test your pages in Internet Explorer, 
Firefox and Opera, as these are the most popular browsers, and 99 
per cent of visitors will be using one of these. 
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2.5 A List Of HTML Tags 


Tag 

Description 



Specify comments within your 


code 


< !DOCTYPE> 

Specifies 

the document type 

<a> 

Specifies 

an anchor 

<abbr> 

Specifies 

an abbreviation 

<acronym> 

Specifies 

an acronym 

<address> 

Specifies 

an address element 

<applet> 

Used to indicate an applet 

<area> 

Specifies 

an area inside an 


image map 


<b> 

Specifies 

bold text 

<base> 

Specifies 

a base URL for all 


the links 

in a page 

<basefont> 

Specifies 

a base font 

<bdo> 

Indicates 

the direction of 


text display 

<big> 

Specifies 

big text 

<blockquote> 

Specifies 

a long quotation 

<body> 

Specifies 

the body element 

<br> 

Inserts a 

single line break 

<button> 

Specifies 

a push button 

<caption> 

Specifies 

a table caption 

<center> 

Specifies 

text centring 

<cite> 

Specifies 

a citation 

<code> 

Specifies 

computer code text 

<col> 

Specifies 

attributes for 


table columns 

<colgroup> 

Specifies 

columns 

groups of table 

<dd> 

Specifies 

a definition 


description 

<del> 

Specifies 

deleted text 

<dir> 

Specifies 

a directory list 
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<div> 

Specifies 

ment 

a section in a docu 

<dfn> 

Specifies 

a definition term 

<dl> 

Specifies 

a definition list 

<dt> 

Specifies 

a definition term 

<em> 

Specifies 

emphasized text 

<f ieldset> 

Specifies 

a fieldset 

<f ont> 

Specifies 

color 

text font, size, and 

<f orm> 

Specifies 

a form 

<f rame> 

Specifies 

frame) 

a sub window (a 

<f rameset> 

Specifies 

a set of frames 

<hl> to <h6> 

Specifies 

header 1 to header 6 

<head> 

Specifies 

document 

information about the 

<hr> 

Specifies 

a horizontal rule 

<html> 

Specifies 

an HTML document 

<i> 

Specifies 

italic text 

<if rame> 

Specifies 
( f rame ) 

an inline sub window 

<img> 

Specifies 

an image 

< input > 

Specifies 

an input field 

<ins> 

Specifies 

inserted text 

<isindex> 

Specifies 

field 

a single-line input 

<kbd> 

Specifies 

keyboard text 

<label> 

Specifies 

control 

a label for a form 

<legend> 

Specifies 

a title in a fieldset 

<li> 

Specifies 

a list item 

<link> 

Specifies 

a resource reference 

<map> 

Specifies 

an image map 

<menu> 

Specifies 

a menu list 

<meta> 

Specifies 

meta information 

<nof rames> 

Specifies 

a noframe section 

<noscript> 

Specifies 

a noscript section 
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<obj ect> 

Specifies 

an embedded object 

<ol> 

Specifies 

an ordered list 

<optgroup> 

Specifies 

an option group 

<option> 

Specifies 
down list 

an option in a drop- 

<P> 

Specifies 

a paragraph 

<param> 

Specifies 
obj ect 

a parameter for an 

<pre> 

Specifies 

preformatted text 

<q> 

Specifies 

a short quotation 

<s> 

Specifies 

strikethrough text 

<samp> 

Specifies 

sample computer code 

<script> 

Specifies 

a script 

<select> 

Specifies 

a selectable list 

<small> 

Specifies 

small text 

<span> 

Specifies 

document 

a section in a 

<strike> 

Specifies 

strikethrough text 

<strong> 

Specifies 

strong text 

<style> 

Specifies 

a style definition 

<sub> 

Specifies 

subscripted text 

<sup> 

Specifies 

superscripted text 

<table> 

Specifies 

a table 

<tbody> 

Specifies 

a table body 

<td> 

Specifies 

a table cell 

<textarea> 

Specifies 

a text area 

<tfoot> 

Specifies 

a table footer 

<th> 

Specifies 

a table header 

<thead> 

Specifies 

a table header 

<title> 

Specifies 

the document title 

<tr> 

Specifies 

a table row 

<tt> 

Specifies 

teletype text 

<u> 

Specifies 

underlined text 

<ul> 

Specifies 

an unordered list 

<var> 

Specifies 

a variable 

<xmp> 

Specifies 

preformatted text 
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This list and the contents of this chapter should help you 
breeze through the chapters that follow, and not get lost with any 
code terminology you encounter. You should take the time to try 
out all the code mentioned in this chapter to get used to HTML 
before you go any further in this book. Just open Notepad, type out 
the code mentioned here, save the file on your Desktop as 
file.html and then double-click the file to see the results in a 
browser. It’s important that you do this so as to get used to typing 
out code, making sure to close every tag you open (<a> needs an 
</a> of everything after <a> becomes a link, etc.) and also get used 
to debugging the flaws in code that you or an HTML editor creates. 
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The Basics Of JavaScript 



M ost people who learn HTML to use on their Web sites aren’t 
programmers by nature or profession, but it would be unfair 
to not let them have the same interactivity in their Web pages as 
any desktop application. JavaScript is a scripting language— a 
“diet” programming language— designed to be easy to learn and 
use even for novices, and by the end of this chapter, you’ll be able 
to write basic JavaScript code even if you’ve never written a 
program before. 
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3.1 The Ground Up 


Before we begin, there are a few things that need dealing with. 
Most importantly, you should read the previous chapter on HTML— 
you’ll need all that knowledge to know what’s happening inside 
your JavaScript code blocks. Next, we deal with some basic pro- 
gramming concepts. 


How JavaScript works 

JavaScript is an Interpreted 
Language — your browser reads 
each instruction and processes 
it in realtime, as opposed to 
compiled languages such as C 
and C++, where all the code you 
write needs to be translated 
into a language that your hard- 
ware can understand (called 
machine language) before it 
can be executed. 

Variables 

Variables store any information 
that you want to use in your 
programs. As the name sug- 
gests, you can change their 
value at any time. All variables 
need a declaration — you have to 
tell the interpreter what to treat 
as a variable. Let’s take a simple 
example— a program that adds 
two numbers. Note that this is 
not actual code, but a represent: 


JavaScript and Java 


A near-foolproof way to get 
programmers to blow their 
gaskets is to draw no distinc- 
tion between JavaScript and 
Java. Despite sharing four let- 
ters of the name, the two lan- 
guages have very little in com- 
mon! Java is a much more pow- 
erful and complex language 
than JavaScript, for one. It 
belongs to the same category 
of languages as C++ and C, lan- 
guages we are most likely to 
see desktop and server appli- 
cations written in. JavaScript, 
however, is a language meant 
only to introduce an element of 
programming to Web pages, 
nothing more. 


of what it’ll be doing. 


The Declarations 
A is a variable 
B is a variable 
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Assigning values 

A=5 

B=7 

Performing Operations 
Print A+B 

Result 

12 

Assigning New Values 

A=ll 

B=14 

Performing Operations 
Print A+B 

Resul t 
25 

...and so on. This way, you don’t have to write different pro- 
grams to add different sets of numbers. 

Functions 

Functions are blocks of code that, once written, can be reused as 
many times as desired within a program. If you wanted to club the 
“Add and Print” functionality we just saw in the previous example, 
you could write a function called AddAndPrint thus (again, this is 
not real code): 

The Declarations 
Function AddAndPrint (A, B) 

(A and B are called Arguments— variables that 
the function will either manipulate or use when 
it is executing) 

What the function will do 
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Print A+B 


Using the function 

AddAndPrint (A, 

B) 

AddAndPrint (B, 

C) 


...and so on. It might seem trivial now, but for more complex 
operations like calculating taxes, you’d much rather call a function 
once than write a hundred lines of code every time you need it. 

Objects in Programming 

In programs, objects represent physical entities, complete with 
their attributes and behaviours. A dog, for example, has a tail— one 
of its attributes; it also barks— one of its behaviours. If you were to 
get your JavaScript dog to bark, it would look something like this: 

Dog . bark ( ) ; 

The objects you will encounter when writing JavaScript code 
will include the browser window— you can use the command 
“window.openQ” to open a new window; there will also be the cur- 
rent document— you can use the command “document.write(“My 
Text”)” to write text onto your web page. Everything else is also an 
object— be it text boxes, images, even your mouse cursor. 

3.2 Baby’s First JavaScript 


Here’s what JavaScript looks like. This is a simple block of code 
that will write the text “Digit” onto your web page, once in normal 
formatting, and once in bold and italics. 


<script type = " text/ j avascript" > 
var name = "Digit" 
document .write (name) 

document . write ( "<bxi>" +name+" </ix/b>") 
</script> 
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JavaScript code is always enclosed in the <script> tags inside 
your HTML document. You can insert code blocks anywhere in the 
document, but it’s always good practice to enclose your scripts 
within the <head> tags of the HTML. This way, the script will 
always be loaded before it gets used within the page. 

As you can see, you can declare a variable and assign it a value 
immediately. We then used the “write” function of the “docu- 
ment” object to output text onto the page. 

If you want to output two strings of text together (called con- 
catenation), you can use “+”. The result of our second “docu- 
ment.write” statement will read “<b><i>Digit</i></b>” (without 
the quotes). Obviously, when your browser sees this text, it will 
interpret it as the HTML it is, and show you the word “Digit” in 
bold and italics. 

If you’ve ever seen or written code in C or C++, you might 
notice that there are no semicolons at the end of each line. 
However, if you look at some of the code on the Web, you will see 
lines terminated by semicolons. They are purely optional, and are 
there so that C programmers don’t suddenly feel out of their ele- 
ment when writing JavaScript. 

Comments 

If you’re writing large scripts, it’s helpful to use comments to note 
down what you’re doing, so that anyone reading the code can 
understand what’s going on— yourself included. 

//this is how you write single line comments 


/* 

And this... 

...is how you write multi-line comments 
*/ 
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Protecting your code from prying eyes 

If you write JavaScript code within your Web page itself, anyone 
can see what you’ve done just by right-clicking on the page and 
selecting “View Source” (the actual command changes from 
browser to browser). 

If you don’t want visitors seeing the code you’ve written, you 
can write it in an external file, and point your Web page to that 
file from within the <script> tags. Let’s assume we’re writing 
JavaScript for www.samplesite.com. This is how you would include 
an external JavaScript file: 


<html> 

<head> 

<script src = " /scripts/sample . j s" 
type="text/ javascript" ></ script> 

< /head> 

<body> 

< /body> 

</html> 


“sample.js” is the file that contains all your JavaScript code. 
Notice that the path to it is an http path with forward slashes. The 
full path to it will be www.samplesite.com/scripts/sample.js. To 
prevent visitors to your site getting their hands on this file, just 
disable read access on the “scripts” folder when you upload the 
site— more on this in Chapter 10. 

Declaring Variables 

Variables in JavaScript can be declared by using the “var” state- 
ment thus: 


var a 
OR 
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var a = 25 

You can declare variables without using the “var” statement: 
a = 25 

Note that variable names are case-sensitive, so “A” is not the 
same as “a”. Variable names cannot begin with numerals— the first 
character must be a letter or an underscore. 

3.3 Conditions In JavaScript 


You can execute different blocks of code depending on condi- 
tions— for example, based on which brower your visitor is using. 
Here’s a list of statements you can use, and what they really mean: 

The “if statement 

“If a condition is true, execute this code.” 

The “if. .else” statement 

“If a condition is true, execute this code, otherwise execute 
that code.” 

The “if. .else if’ statement: 

“If a condition is true, execute this code, otherwise check if 
this other condition is true.” 

The “switch” statement: 

“Check through all these conditions and execute the appropri- 
ate block of code.” 

To illustrate, we’ll check which browser your visitor is using, and 
display a different message for each browser. 

Example: The “if statement 


<script type=" text/ j avascript" > 
//get the browser's name 
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var browser = navigator . appName 
if (browser= = "Opera" ) 

{ 

//let's pop open an Alert box 
alert ("Try the Mouse Gestures!") 

} 

</script> 


Always indent code that you write within the curly braces 
“ { } it makes it neater and easy to understand. 

Example: The “if... else” statement 


<script type=" text/ javascript" > 
var browser = navigator . appName ; //get the 
browser's name 

if (browser= = "Opera" ) 

{ 

alert ("Try the Mouse Gestures!"); 

} 

else 

{ 

alert ("Well, your loss!"); 

} 

</script> 


Example: The “if... else if’ statement 

<script type=" text/ javascript" > 
var browser = navigator . appName //get the 
browser's name 

if (browser= = "Opera" ) 

{ 

alert ("Try the Mouse Gestures!") 

} 

else if (browser=="Microsof t Internet 
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Explorer" ) 

{ 

alert ( "Beef up your security settings!") 

} 

else 

{ 

alert ( "Firefox, eh?") 

} 

</ script> 

Example: The “switch” statement 


<script type=" text/ j avascript" > 
var browser = navigator . appName //get the 
browser's name 

switch (browser) 

{ 

case "Opera" : 

alert ( "Try the Mouse Gestures!") 
break 

case "Microsoft Internet Explorer" : 
alert ("Beef up your security settings!") 
break 

case "Netscape" : 

alert ( "Firefox identifies itself as 
Netscape ! " ) 
break 
} 

</ script> 


The “switch” statement takes the variable “browser” and 
compares it one by one to the values mentioned in the “case” 
statements. The “break” statement prevents the browser from 
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executing the very next line of code and tells it to exit the 
“switch” block. 

The conditional operator 

There’s another way you can check conditions in JavaScript— this 
one specifically if you want to assign a value to a variable based on 
a condition. This is how you use the conditional operator: 

variable = (condition) ? valuelfTrue : 
valuelf False 

This is the equivalent of this "if...else" 
statement : 

if (condition) 

{ 

variable=valuelf True 

} 

else 

{ 

variable=value If False 

} 


3.4 Loops 


Programming loops let you execute the same block of code over 
and over as many times as you like— a far sight better than actually 
writing the same lines more than once. The simplest example 
would be printing the numbers 1 to 10, or 1 to 100, for that matter. 
There are two loops you would use in JavaScript— the “for” loop 
and the “while” loop. 

The “for” loop 

The “for” loop is typically used when you know (or can predict) 
exactly how many times a piece of code will run. In the above 
example, for instance, you know that you will be printing a num- 
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ber 100 times and not more. Here’s how you write a “for” loop: 
for(i = 0; i < = 1 0 0 ; i + +) 


Here, “i” is a variable that exists only within the loop. In the 
brackets, we’ve started “i” with a value of 0, put a condition that 
“i” should always be less than or equal to 100, and the “i++” state- 
ment increments the value of “i” by 1 every time. The output of 
this statement will be: 

1 

2 

3 

100 

The “while” loop 

If we were to translate it into spoken English, the “while” loop 
effectively tells your browser, “As long as this condition is true, 
keep executing this block of code.” You would typically use a 
“while” loop to check a condition rather than execute code a spe- 
cific number of times. Taking the same example as above, here’s 
what the “while” loop would look like: 

while (i<=100) 


{ 


document . write ( i+" <br>" ) 


} 


{ 


document . write ( i+" <br>" ) 
i = i + l 


} 
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3.5 Functions in JavaScript 


We took a cursory look at what functions are at the beginning of 
this chapter— let’s take the more specific context of functions in 
JavaScript. 

Writing a function 

Writing a JavaScript function is hardly different from writing any 
old block of code— only this time, you’ll be enclosing them in curly 
braces and giving them names. Once you’ve written a function, 
you can make it execute at any time just by calling it by name. 

Functions are best written within the <head> tags of your 
HTML document, so that they load before the document is ren- 
dered in the browser. Let’s write a function that tells a visitor 
which browser he or she is using. 

<html> 

<head> 

<script> 

function checkBrowser ( ) 

{ 

var browser = navigator . appName 
alert ("You are using ”+browser) 

} 

</script> 

< /head> 

<body> 

cinput type= "button" value= "Check Browser!" 
onclick= "checkBrowser ( ) " > 

< /body> 

</html> 


The statement “onclick=“checkBrowser()”” tells the browser to exe- 
cute the “checkBrowser” function when the button is clicked, 
“onclick” is an event associated with the button— we’ll get to events 
later in this chapter. You can also have functions that accept argu- 
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merits, which it will then manipulate within itself. Let’s take the 
example of a function that squares and adds and then displays two 
numbers. 


<html> 

<head> 

<script> 

function addAndPrint (a, b) 

I 


X 

document .write (a+b) 
t 


1 

</ script> 
</head> 


<body> 

< input type= "button" 

onclick= "addAndPrint (5 , 6 ) " > 
</body> 

</html> 

value= "Add ! " 


You can now call “addAndPrint” anywhere, and give it any two 
numbers you please. 


3.6 Using Pop-Up Boxes In JavaScript 


If you’ve tried out some of the above examples, you will have noticed 
that the “alertQ” function brings up a popup dialog with an OK but- 
ton. There are two other popup dialogs that you can use in JavaScript: 

The confirm box 

Ever encountered an “Are you sure you want to close this site?” 
with an OK and a Cancel button? These are called confirm boxes, 
and are used quite often in conjunction with “if’ and “if... else”. 
Clicking on the OK button sends back a “true” to the JavaScript, 
and Cancel sends back a “false”. Here is a piece of code that closes 
the window if the visitor clicks on a button and then clicks OK. 


48 


EM! FAST TRACK 




THE BASICS OF 
JAVASCRIPT 


WEB DESIGN 


<html> 

<head> 

<script> 

function CloseWindow ( ) 

{ 

if (confirm ( "Do you really want to close the 
window?" ) ) 

{ 

window. close ( ) 

} 

} 

</script> 

< /head> 

<body> 

cinput type="button" value="Die!" 
onclick= "CloseWindow ( ) " > 

< /body> 

</html> 


Note that This bit of code might not work the same for all 
browsers. IE, for example, will ask you for confirmation again, and 
when we tried it on FireFox, it just didn’t work. 

The prompt box 

You would typically use a prompt box to get a piece of information 
from the visitor— perhaps a name, so you can say hello: 

<html> 

<head> 

<script> 
function Hello () 

{ 

var name=prompt ( "What is your name?" , "name- 
less" ) 

/* 

The first argument for the prompt is the 
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question you want to ask, and the second is the 
value to use by default 


</ script> 

</head> 

<body> 

<input type="button" value="Hi!" 
onclick="Hello ( ) " > 

</body> 

</html> 


Events are probably where you’ll find JavaScript used the most. 
Anything that “happens” on your Web page is an event— a mouse 
click, the cursor moving over an image, hitting a key on the key- 
board, and so on. To each of these events, you can associate a func- 
tion, called an event handler, which will execute each time the 
event occurs. We’ve already seen the “oncliclc” event in the pre- 
ceding examples— the function that is assigned to it using the 
statement “onclick = “[function name]”” is now the event handler. 

Some of the most common events are: 
onChange: 

This event occurs when you change the text of a text box or text 
area and move the cursor out of it (either by clicking somewhere 
else or using [Tab]) or when you change the selection in a drop- 
down menu, to state the more common uses. 

Usage: 

<input type="text" onChange="doThisNow ( ) " > 


*/ 


alert ( "Hello , "+name+ " ! " ) 


} 


3.7 Events In JavaScript 
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onload: 

This event occurs when the page finishes loading. You would 
assign it an event handler in the opening <body> tag: 

Usage: 

<body onload="greetings ( ) " > 

onUnload: 

This event occurs when you either close the window or navigate 
away from the page. This, too is assigned a handler in the opening 
<body> tag. 

onMouseOver and onMouseOut: 

These two events are used primarily to create animated buttons 
and menus. To illustrate, let us take an example— an image that 
will act as a link to your home page, and display another image 
(perhaps a different colour) when the mouse cursor moves over it. 


<html> 

<head> 

<script type= "text/ j avascript" > 
function mouseOver () 

{ 

document . logo . src = "logo_green . gif" 

} 

function mouseOut ( ) 

{ 

document . logo . src = "logo_blue .gif" 

} 

</script> 

< /head> 

<body> 

<a href= "http://www.mysite.com" 
onMouseOver= "mouseOver ( ) " 
onMouseOut= "mouseOut ( ) " > 

<img src= "logo_blue . gif " name="logo" /> 
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</a> 

</body> 

</html> 


There are simply too many events to list here— you will 
encounter more as you keep learning JavaScript. Refer to chapter 
11 for books and Web sites to help you out. 

3.8 Manipulating The Browser Window 


In JavaScript, you can use the “window” object for some useful 
(also annoying and fun) tasks. To open a new window, use this 
statement: 

window . open ( "http : / /www . putyourURLhere . com" ) 

Note: The first things that pop-up blockers look for is a 
“window.open()” statement that is either associated with the 
“onload” event or no event at all. So if you use the statement in 
any of the aforementioned manner, all self-respecting browsers 
will block that code. Similarly, to close a window, you can use: 

window . close ( ) 

A fun script to try 

Let’s write a script that should freak people out a little. After a 
small time delay, this will move the browser window to a new 
location— something your visitor obviously won’t be expecting. 


<script> 

set Timeout ( "window . moveBy (200,-200)", 5000) 

</ script> 


Note: This script works only in IE and Firefox. 

The “setTimeout” function executes the statement in quotes 
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after a delay of 5,000 milliseconds (5 seconds). It comes especially 
handy if you have a part of your page that needs to be updated at 
fixed intervals. 

The “window.moveBy(x,y)” function moves the window x pixels 
to the right and y pixels below. If you give it a negative number, 
the direction will reverse. 

Covering JavaScript adequately would probably run into tens of 
Fast Tracks, but this should help you understand at least the basics. 
If you want to learn more, you should invest in a bigger book or turn 
to the Web. To find out about books and sites, turn to Chapter 11. 
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PHP 



T he origins of PHP can be attributed to Rasmus Lerdorf, a 
Danish-Canadian programmer. It was initially known as 
Personal Home Page tools, and was released on 8 June 1995. In 
1997 the acronym was changed to Hypertext Preprocessor. The 
years following 1997 saw a tremendous spurt in the number of users 
of PHP, and there was even a more organised approach to making 
improvements instead of it being a small team effort. 
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4.1 PHP— The What, Why And Whodunit 


PHP is a server-side scripting language, and is the open source alter- 
native to Microsoft’s Active Server Pages (ASP). The two terms Server 
Side and Scripting Language deserve mention first. A server side lan- 
guage resides on the Web server, and users sitting at their respec- 
tive workstations can interact with the language through the CGI 
(Common Gateway Interface), or directly through the Web server. 
What actually happens in a server side language is the code is 
designed to run on the server; for example when PHP code is 
encountered in a page requested by a visitor, the server executes it 
and the result is sent to the client. The benefit is that no plugin is 
required at the user’s end, because nothing is downloaded to the 
browser. Servers-side languages are more powerful because, very 
simply put, they run on servers, and are not dependent on the capa- 
bilities of an unknown workstation present anywhere on the Net. 

A Scripting Language is unlike other programming languages 
because it is interpreter-based, as opposed to compiler-based. 
Being an Interpreter-based language, it’s easier to modify because 
individual lines of code can be executed, as opposed to compiler- 
based languages, where a complete sequence needs to be written. 

PHP is gaining popularity every passing moment, and why not? 
The OSS (Open Source Software) tag means the entire code in 
which it was developed is openly available for whatever modifica- 
tions users deem necessary. PHP is cross-platform, meaning it can 
be run on any Web server, and along with MySQL (a small database 
server) can be, for example, used to develop under Windows, and 
serve on a Linux platform or vice versa. OS independence is anoth- 
er strong feature— unlike ASP, which requires the Windows plat- 
form. Besides this, PHP is free! 

PHP sees most frequent use with Apache (the Web Server) on 
most platforms. On the Windows side, PHP can be used with 
Microsoft’s IIS (Internet Information Services). To get using PHP 
properly, you’ll need a basic knowledge of HTML and XHTML. 
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The biggest advantage that an application can get by going 
open source is the sheer bounty of talent in the form of thousands 
of developers who dedicate time and grey matter to simplify 
and/or improve the application. Another major advantage PHP 
enjoys is that it’s extremely light on system resources. 

Another way of looking at PHP’s popularity is the growing 
number of Web sites. A site today is very different from a site of a 
few years ago, simply because of its users. A typical user is not sat- 
isfied with an ordinary site with some text and pictures. He wants 
something attention-grabbing, something that serves not only his 
purpose, but also makes browsing fun. Animations and interactiv- 
ity form a large part of that fun factor, and coding in PHP is sim- 
ple— you can achieve a lot more with fewer lines of code. 

PHP code is similar in syntax to Perl and C. For those not inter- 
ested in getting too much into coding, there are PHP-based CMSes 
(Content Management Systems) available, like PHP-Nuke, which 
don’t require the user to have any programming knowledge. 
However, the flexibility of PHP cannot be denied, and all that PHP- 
Nuke allows is basic Web page manipulation, so we shall refrain 
from such front-end efforts. The basic purpose of PHP is server-side 
coding, so lets gets down to it! 
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4.2 Prerequisites 


For the platform and environment we used EasyPHP version 1.8, 
which we’ve provided on the Digit CD. The main reason for using 
EasyPHP is ease of use— it installs The Apache Web Server and 
MySQL automatically, and configures everything, making your job 
as a relative beginner infinitely simpler. EasyPHP is not greedy for 
resources, so a system that is even a couple of years old will easily 
handle all the applications thrown at it. 

PHP is a programming language, unlike HTML, which is simply 
a markup tool, and PHP can even be embedded inside an HTML 
document. As you will see in the examples later on in this chapter, 
PHP code is distinguished as executable by the PHP interpreter on 
the basis of it encountering “<?php”. This signifies that the fol- 
lowing lines are actually PHP code, and the execution is terminat- 
ed by “?>”. This combination can be used multiple times in a doc- 
ument: each time, the proper beginning and termination encap- 
sulate PHP code, while the remaining body of the document can 
contain HTML. This is what we mean by “embeddable.” Clicking on 
“View Source” in your browser doesn’t do anything except display 
HTML code. This is because PHP scripts are executed on the server 
(since PHP is server side and the installation resides there), and the 
resulting HTML is sent to the browser on the workstation from 
where the execution commenced. 

PHP code can be written in Notepad, and many HTML editors 
support it as well. 
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4.3 Getting started 


Installing EasyPHP is 
a piece of cake, or 
rather a sip of tea. It’s 
snappy for one, and 
totally automated. 

Browse through to 
your EasyPHP direc- 
tory; you will find a 
folder named 

“www”, among oth- 
ers. Inside this folder 
is a .php file called 
“Index”. Simply 

opening this file in 
Notepad will display 
code, as we mentioned earlier, as the scripts are server executed. 
Your first lesson begins here. 

Start EasyPHP from the Start Menu, and open your browser. 
Type in “http://localhost” and you will see the default EasyPHP 
page. In fact, after using Notepad or Wordpad for creating/editing 
PHP code, simply save it as a .php file and you can simply use the 
syntax //localhost/<filename>.php in your browser’s address bar, 
and the Web page you created will appear in the browser window. 

If you’re using another computer as your server (meaning 
your PHP installation resides there) you can simply type in the 
IP address of that machine into your browser’s address bar. If 
you’re using your own machine as a server as well as Web serv- 
er, you may not be able to view the PHP default page, or any 
other Web page by using your own IP unless you follow these 
steps (only applicable if you use a proxy server to connect to 
the Internet). 



Use a browser to display the result of your 
PHP code 
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1. In your browser window address bar, type in “about:config” 

2. In the filter option, type in “proxy” 

3. In the search results, navigate to “network. proxy.no_proxies _on” 

4. Double-click on this— you will see a box with one IP as a default 
value, typically 127.0.0.1. Add a comma and enter your own IP 

5. You can now use your own IP address in the address bar. 


Here’s a screen- 
shot of about:config; 
highlighted is the net- 
work. proxy.no_prox- 
ies_on, the entry 
where the hosts IP 
address is to be added. 




The about:config IP setting 


Note that about: 
config only works 
with Mozilla and 
Opera. IE users will need to go to Control Panel > Internet Options 
> Connections > LAN Settings > Bypass Proxy Server for Local 
Addresses. This entry should be checked. 


Let’s get down to creating your very first code in PHP. Before we 
take the plunge, however, there are a few rules to remember. 

1. The file containing the PHP code needn’t be an executable; 
rather, the .php extension does its magic here. 

2. PHP looks for opening and closing tags to distinguish between 
PHP code and the rest of the html document. These start and 
stop tags are very simply “<?php”, which will cause parsing of 
any code found after it. Parsing is, very simply put, syntax analy- 
sis, and the program devoted to this task of analysing an input 
sequence in order to determine its grammatical structure is 
called a parser. The closing tag “?>” will simply cause code placed 
after it to be treated as HTML, until, of course, another “<?php” 
is encountered. This makes PHP embeddable, and most Web 
pages contain PHP code embedded within the html document. 
You can also use short tags— just “<?” and “?>” 
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3. Like C, every line of PHP code must end with a semicolon (;), 
which indicates a line termination. 

4. Variables are declared with a $ symbol; a variable may contain 
an alphanumeric string, numbers, or an array. Note that in the 
example below we have declared a variable named “digit”, 
which is preceded with a $ symbol. 

5. Once again, like C and C++, PHP supports comments enclosed 
within /* and */. Nesting of comments is impossible, however, as 
the comment ends as soon as the first */ is encountered. Note 
that we have used the // operator, which is used for single-line 
comments. The /* and */ works best for multiple-line comments, 
and in such a case saves the user from remembering to use a // 
for every line. 

Let’s look at a sample now, our first little program: 

Example 1 

<?php 

// this is our first program 
// the formatting operators have also been 
used here, like <i>, which is the // italics 
operator, while <br> simply causes the state- 
ments following to go to // the next line. Note 
the use of "//" these are the comment inserts 
// and statements on the same line as them 
are not executed 

echo "Question: Are you enjoying this month's 
<i>Fast Track</i> so far?<brxbr>” ; 

$digit=l ; 
if ($digit==l) 

{ 

echo "Correct Answer— Yes you 
are<brxbr>" ; 

echo "NOT as much as we enjoyed writ- 
ing it I bet ! ! " ; 

} 

?> 
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The start tag (<?php) is first as usual, followed by the echo com- 
mand, which displays a message or “string” on the screen. The <i> 
is used to display text in italics; we then assign a value to the vari- 
able “digit”, while declaring it. 

The If statement follows, with a condition to display some text 
if its parameters are met, i.e. if the variable “digit” is equal to 1, 
which it is, as we assigned the value just above. 

As seen from this example, the similarity to the C/C++ and 
Unix Perl-style programming is strong. 
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The result of our first program 


The file, named DIGIT.php, was placed in the “www” folder, 
where a simple “//localhost/ DIGIT.php” typed into the browser 
pane would open the result of our labour directly in the brows- 
er window. 

Having used the If statement above, it would be apt if we dis- 
cuss the various conditional operators that PHP supports. 
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4.4 Conditional Operators 


We’ve seen how conditional operators work, in chapter 3. These 
include the if.. .else statement, which we’ve used in the example 
above. Then there is the if...elseif statement, which isn’t as efficient 
as the switch statement when multiple conditions are possible. The 
switch statement is perfect for use when multiple conditions are 
present, and looks much more streamlined than the blockier cod- 
ing that would result if the elseif statement were to be used. 

Then there are the for and while loops, the syntaxes of which 
are as follows: 


for (initialization; condition; increment) 

{ 

code to be executed; 

} 

and 

while (condition) 
code to be executed; 

There is also the do-while statement, which causes execution of a 
block of code at least once, and is then based on the fulfilment of 
the condition stated in the while statement. 

Let’s move on to our next example, since it’s much easier to fol- 
low programming syntax, with a practical hands-on! PHP has a 
number of conditional operators, and the for, while, switch, and if 
statements can be used. The for and while loops have been used in 
the example below. 
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Example 2 

<?php 
$a=l ; 

$b=2 ; 

$m=l ; 

/* The For loop contains a condition for the 
variable 'B' being less than or equal to 10, in 
the final part of the for statement b has been 
incremented, while 'A' has been reset to the 
value 1. Note that the first part of the For 
statement has been left out, i.e. the initiali- 
sation part */ 

for ( ; $b<=10 ; $b=$b+l , $a=l ) 

{ 

while ($a<=12) 

{ 

$m=$b*$a; 

/ / Variable m has been assigned the product 
value of variables a and b // 
echo "$b * $a = $m <br>" ; 

$a=$a+l ; 

// the variable 'A' needs to be incremented 

} 

echo "<br>" ; 

} 

?> 


This program very simply displays the product of two variables, 
to which we have assigned values. In simpler words, this program 
displays maths tables up to 10! 

We assign values to $a, $b and $m while declaring them. Use of 
the for operator sees us assigning a condition to the variable $b, so the 
statement loops till $b reaches the magic figure of 10. At the same 
time, we’ve incremented $b ($b=$b+l) every time the loop is run. 
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A nested loop has been created using while, where we com- 
mand the statements within the inner brackets to execute, until 
the value of the variable a is equal to 12. A simple multiplication 
operator is used next to actually compute the product, while the 
display statement, (via the echo command), ensures that you see 
the tables displayed in your browser window. Finally, after every 
loop we have incremented the value of $a. 

If you notice, we have added the statement “$a=l” inside the for 
statement, else once the value of $a becomes 12, the program will 
terminate after just displaying one set of the two-times table. 

Let’s see some more practical examples of PHP code. Below is a 
program that changes the background colour of the browser page 
based on which day it is. A simple array (we have covered arrays 
later in this chapter), Sbgcolor, has been defined, with the respec- 
tive colours for the seven days of the week. Note that the colours 
defined are in hexadecimal format. Hexadecimal format is a very 
compact and easily convertible to and from other systems, like the 
decimal and binary system. A base of 16 is used, including num- 
bers from zero to nine (0—9), and the first six letters of the English 
language, i.e. A, B, C, D, E and F. Another variable “$today” which 
is assigned the “date” function, and a variable x. The date function 
as you might have guessed is responsible for getting the current 
system date. 

The simple output of this program will be the statement “This 
just changes the colour of the screen based on the day of the 
week”, with the background colour of the screen of course chang- 
ing according to the day of the week. 
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Example 3 

<html> 

<head> 

<title>Background Colors change based on the 
day of the week</title> 

< /head> 

<? 

$today = date ( "x" ) ; 

$bgcolor = array ( 

"#E6EDFF" , "#FFFFFF" , "#FBFFC4" , "#E9FFE6" , 

"#FEF0C5" , "#FFE0DD" , "#F0F4F1" 

) i 

?> 

<body 

bgcolor="<?print ( "$bgcolor [$today] " ) ; ?>" > 

<brxbrxb>This just changes the colour of 
the screen based on the day of the week 
< /body> 

</html> 


4.5 Functions 


Although functions have been covered in the previous chapter, any 
reference to programming needs a reference to functions as well, 
so here we go again! A function is an independent module of code, 
that can be executed either as part of a program, or can be called 
from any other part of a program to be executed. Functions are 
one of the most important aspects of programming. In a large 
database, instead of individually adding, deleting or modifying 
records (the three default actions that may could be performed on 
a database, as routine maintenance), individual functions can be 
written for the same. Whenever a record is to be edited; the mod- 
ification function can be called for execution, saving the pro- 
grammer from extra code writing, and of course, program logic. 
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Functions can be written to return values, or write output 
information. Functions can also be nested, meaning one function 
can contain one or more functions within its brackets. Besides 
user-defined functions, PHP has some 750 inbuilt functions. 


We’ve given two examples below; in the first example, a func- 
tion is used to simply display text. In the second, we see a function 
returning values. 


Example 4 


<?php 

function Name ( ) 

{ 

echo "DIGIT" ; 

} 

function namel () 

{ 

echo "Test Centre" ; 

} 

echo "<b>Hi Readers ! <brxbrxb>“ ; 
echo "This is 
Name ( ) ; 

echo " . <brxbr> and all of us at 
Namel ( ) ; 

echo "<brxbr> Hope you enjoyed this months 
issue" 

?> 


Our very humble program, 
when executed would look some- 
thing like this: 

Lets take a look at a function 
returning a value based on a sim- 
ple addition. 
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Using functions to display text 
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Example 5 

<?php 

function add($a,$b) 

{ 

$total = $a + $b ; 
return $total; 

} 

$sum = add (5,8) ; 

echo "5 + 8 = ".$sum; 
?> 


A function, “add”, is declared, with the parameters $a and $b, 
two variables that are being passed. The sum of these two variables 
is being passed to a variable $sum, where the result of the addi- 
tion is displayed. 

4.6 Arrays 


An array is a data structure capable of storing one or more 
than one value in a single value. PHP supports arrays as a data 
type as well. Arrays are very useful to store large numbers of 
similar variables. 

An array is similar to a matrix; every element of an array has 
its own address, and can be referenced using that address. Arrays 
have great practical importance in any programming language, 
and particularly in PHP. Suppose a user wishes to load a list of 
clients from his database to use on his Web page; he/she would typ- 
ically load it into an array. In all practical terms it would be high- 
ly inefficient to declare variables for each client, wouldn’t it? 
Here’s where array’s come into the picture: not only is the code 
minimised, but efficiency in terms of storage and execution of 
scripting code can maintained. 
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In PHP arrays can be of three types: 

1. Numeric arrays— here a numeric ID lcey is used to store ele- 
ments. This key can be manually or automatically assigned to 
each element. 

Example 6 

$fruit = 

array ( "Mango" , "Apple" , "Pineapple" , "Orange" ) ; 


In the above example, the ID keys are assigned automatically. 
Example 7 

$fruit [0] = "Mango" ; 

$fruit [1] = "Apple" ; 

$fruit[2] = "Pineapple"; 

$fruit[3] = "Orange"; 


This achieves the exact same result as Example 6, only we have 
assigned the ID keys manually here. 

2. Associative Arrays— here the numeric ID key is assigned a 
value. Useful when the array is much larger; each of the ele- 
ments can be referenced by calling them directly, or using the 
numeric value. 

Example 8 

$Q3f rags [' Maximus ' ] = "100"; 

$Q3 frags [ 'Vandal ' ] = "65"; 

$Q3frags [ 'Andreophile' ] = "48"; 

$Q3frags [ 'Badjag' ] = "52" 


If you look at example 2, you will see an identical approach to 
array declaration, we could also have defined similar to example 
one, which would look something like this: 

$Q3frags = array! "Maximus" = >100 , 

"Vandal"=>65 , "Andreophile"=>48 , "Badj ag" =>52 ; 
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Both the above examples achieve the same thing, only in two 
different ways of declaring. Just make sure to choose a particu- 
lar syntax and stick with it— there’s nothing more irritating for 
a coder to come across similar statements using different alter- 
nate syntaxes. 

3. Multidimensional Arrays are a group of arrays declared within 
a single larger array. Each element can also be an array. 


$ amdcpu = array ( 

"FX" =>array 

( 

"FX60" , 


"FX57" , 


"FX55" , 


"FX53 " , 
\ 

"X2" =>array ( 

I / 

" 4 8 0 0 + " , 


" 4 6 0 0 + " , 


" 4 4 0 0 + " , 


" 4 2 0 0 + " , 


" 3 8 0 0 + " , 

1 / 

"Venice" =>array ( 


" 3 8 0 0 + " , 


" 3 5 0 0 + " , 


"3 2 00+" , 

) ; 

" 3 0 0 0 + " , 

) 


In the above example, we have defined an array “amdcpu”, 
which is the main array, or a multidimensional array. This array 
contains a number of smaller arrays, each with their own entries 
denoting processors from a particular family. As you can see, it’s 
simply a case of an array containing another array! 
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Working with Files 

PHP has inbuilt functions for working with files. Here are some 
basic commands needed to get you started with file handling. File 
handling is an integral part of PHP: it allows the programmer to 
manipulate an existing file for either reading, or modification. 
PHP scripts are frequently used to work with data stored in sepa- 
rate files, be they documents or spreadsheets, and the following 
commands allow programmers to manipulate files that contain 
data pertinent to the very purpose of writing the programming 
script in the first place. 

fopen(): This function is used to open files in PHP. There will be 
two parameters inside the parentheses, the first being the name of 
the file to be opened, and the second parameter specifying the 
mode in which it should be opened. If fopen() is unable to open the 
file, a zero, indicating false, is returned. 

fclosef): the exact reverse of fopenf), used to close files opened 
with fopen(). 

fgetc(): This command is used to read a single specified character 
from a file. Note that the pointer has to be moved to the next char- 
acter once a match is found. This command can also be used to 
read the contents of a file, character by character, as we’ve done in 
the example below. By far one of the most important file handling 
commands. 

feof(): Used when a particular condition is to be checked until the 
end of the file is reached. This command will return a “true” when 
the end of a file is reached. 

An example: 


< ?php 

$f =f open ( "to_our_readers . txt" , " r" ) or 
exit ( "Unable to open file!"); 

// Using while statement to search till the 
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end of the file is reached 
while (!feof($f)) 

{ 

/ / each character is picked up one by one and 
displayed i.e. the entire 

// contents of the file to_our_readers 
$x=fgetc ($f ) ; 
echo $x ; 

} 

fclose ($f ) ; 

?> 

We simply created a .txt file titled “to_our_readers". In the first 
statement, either the file is opened in memory, or a message is dis- 
played: “unable to open file”. The While statement will loop as long 
as the end of the file isn’t reached; one reached, the program will 
exit. Note that it is good practice to always close a file you open. 
Here the term Open doesn’t mean open to view; the file is simply 
opened in memory. One cannot actually view its contents, except by 
using some programming logic similar to what we have used above. 

Form Handling 

A form in HTML simply denotes a section of a document con- 
taining normal content, markup or special elements like check- 
boxes, radio buttons, menus etc. and the labels for them. This 
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Form handling 


form is then completed by users, who may add text, select 
options from a menu etc. PHP interacts very well with html 
forms. One important advantage with PHP is that any form in 
your HTML document is automatically available to PHP scripts 
anywhere in that document. 
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Here’s an example: 

<html> 

<body> 

Welcome <?php echo $_POST [ "name" ] ; ?>.<br /> 
You are <?php echo $_POST [ "age" ] ; ?> years old! 
</body> 

</html> 


We’ve created a .php file with the above code. If you attempt to 
execute this file, however, you’ll get an error simply because the 
variables haven’t been assigned any values. We now create anoth- 
er .php file, with the code as given below. 


<html> 

<body> 

<form action=" formhandling . php" method=" POST" > 
Enter your name: cinput type="text" 
name = " name " / > 

Enter your age: <input type="text" name="age" 

/> 

<input type=" submit" /> 

</ form> 

</body> 

</html> 


This code actually redirects to the file mentioned (in this case 
“formhandling.php”), passing on the values for “name” and “age”, 
and uses these values with the output statements given in the pre- 
vious script. 

In the next chapter we’ll focus on site design tools, a far cry 
from PHP scripting, but nonetheless a necessary part of Web site 
integration and design. 



A simple page with values passed from another PHP script 
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Site Design Tools 



I f you want to design a Web page and don’t want to learn too 
much coding— no problem! There are a number of tools available 
that can be used to create a Web site which, depending on your 
creativity, can even look as if it has been designed by a 
professional. 
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Earlier, Web sites were written in basic HTML (HyperText Markup 
Language), a markup language that gives a Web page basic struc- 
ture such as headings and paragraphs. This was an easy way to 
view Web pages for people who had only recently migrated from 
the text-based shell account to a TCP/IP account, and provided a 
much richer Web surfing experience because they could view 
images for the first time. 

As the years went by, HTML became more and more complex. 
New forms of layout devices— such as tables— came to be used, and 
were found to be a better way to place data. Then came CSS or 
Cascading Style Sheets, a stylesheet language that is used to 
describe the style of elements in a document marked up using a 
markup language. Database integration technologies such as serv- 
er-side scripting also changed the way the Web is made. 

A Web site is a patchwork of files of various types such as 
HTML, images, multimedia, PDF, and more. In order to keep them 
linked to each other, code written in a markup language is neces- 
sary, and there are various tools aimed at doing just this. To design 
a complete Web site, four kinds of software are necessary: 

o Code editors 
o Web browsers 
o Image editors 

o Multimedia editing and design tools, plug-ins, etc. 


You will learn how to work with various code editors in this 
chapter, so as to get yourself started with building your very first 
Web page. 


74 


EM! FAST TRACK 



SITE DESIGN TOOLS 


WEB DESIGN 


5.1 CoffeeCup HTML Editor 2006 


CoffeeCup is an HTML editor with drag-and-drop support and an 
inbuilt FTP uploading facility. Tables, frames and forms can all be 
created using easy-to-use Wizards. It supports HTML 4.0 and 
XHTML tags. It also includes Wizards for images and links, and a 
Quick Start so you can create Web pages in no time. 

If you wish to learn HTML, you can use the Code Editor and the 
Visual Editor. CoffeeCup comes with more than 100 DHTML and 
JavaScripts, a DHTML Menu wizard, 25,000 graphics and photos 
including more than 1,000 XP Style Icons, and access to more than 
500 free Web-site templates. It includes an HTML Code Cleaner, 
which rids the HTML code of unnecessary data and provides clean 
and easy-to-understand code. Also included are a Project Manager, 
a Flash Text Wizard, a Color Scrollbar Wizard, a StyleSheet Editor, 
and a List Wizard. 


5.1.1 Getting started with CoffeeCup 
When you launch this 
HTML editor, you will be 
greeted with a dark screen 
with a CoffeeCup logo and 
a Tip of the Day. Click on 
the File menu and select 
New from Quick Start. The 
Quick Start window will 
appear. Enter the title of 
the page in the Page Title 
box. Enter the background 
image for your Web page 

in the Background Image box. You can now choose the colours of 
the background, text, links, and visited links and active links, and 
preview on the right how it will appear. Alternatively, you can 
choose a preset colour scheme from “Use the Following Color 
Scheme” drop-down box. 
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The CoffeeCup main window 
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Click on the Advanced 
tab to key in the Meta 
information that is 
accessed by search engines, 
such as a short description 
of your page and the key- 
words associated with it. 
You can also specify a redi- 
rect URL if needed. Once 
you are done filling, click 
on the Cool button and a 
new page will open. 



The Quick Start window in CoffeeCup 


You will view the Code 
Editor by default. Click on 
the Visual Editor tab to 
view the visual mode of 
the editor, which we shall 
be using henceforth. Code 
Editor is the mode where 
you can directly edit the 
HTML code, whereas in 
the Visual Editor, you can 
actually view how your 
page will appear, and use 
the drag-and-drop support 

to place objects on your page. You will be prompted to save the file 
before switching to the Visual Editor, so save it as index.html. 
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The Code Editor View in CoffeeCup 


Once you are in the Visual Editor, you will see a blank screen. 
You can now start creating your own Web page. 

5.1.2 Adding text objects to the page 

To start with, we shall add some text to our page. Click on the Format 
menu and mouse over to Font > Font Wizard. Here you can set the 
font, size, colour, and more. Now type in whatever you want to 
appear on your Web page, and it will appear in the chosen font style. 
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5.1.3 Inserting an image 

Now let us add an image to the page. Under the Insert toolbar 
menu, choose Insert, or click the Insert Image icon just above the 
edit area. 

Select an image from 
amongst the free graph- 
ics provided with the pro- 
gram, or choose an image 
of your choice from the 
left of this window. Enter 
the path to the image in 
the Image box. Enter the 
text that should appear if 
the image is not available 
or broken, in the Alt Text 
box. You can also set the image alignment and the border, as 
also the height and width of the image. You can also make the 
image clickable as a link by placing a URL in the “Create Image 
as Link” box. 

Clicking on the Thumbnail tab will provide the option of 
inserting a thumbnail of the original image into the page instead 
of the original. The user can then link back to the original file. 

You will be prompted to copy the image to your working fold- 
er. Click Yes. 

5.1.4 Inserting a link 

To add links to your page, click on the Insert menu and then on 
Link. The Insert Link window will open. 

“Link Text” is the text that will appear in the document that 
the user will click on to access the link. “URL" is the URL of the Web 
site being linked to. “Target field” can be left blank unless the user 
has a specific frame they want the linked page to appear in. “Title” 
displays the title of a link in a small box when the user hovers over 



Inserting an image into your page 
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it with the mouse. Text 
entered in the Status 
Window Message will be 
displayed at the bottom of 
a browser in the status 
area. Click on the Cool but- 
ton after you’re done. 

In a similar way, you 
can insert an e-mail link 
by clicking on Insert > E- 
mail Link. An Insert E-mail 
Link window will open. 
Again, Link Text is the text 
that will appear in the 
document that the user 
will click on to access the 
link. “E-Mail Address to 
link to” is where you want 
the e-mail sent. You can 
also specify a default sub- 
ject for the e-mail. All e- 
mail received from this 
link will have this subject. 
Text entered in the Status 
the bottom of a browser in 



Inserting a link into your page 




link Text: 

E-mail me! 


E-Mail Address to link to: (For Example: YourName@YourDomain.com) 
admin@abc-inc . com 


Subject (optional): 


Status Window Message: 

□ Show Status Window Message On MouseOver 
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Inserting an e-mail link into your page 

Window Message will be displayed at 
the status area. 


Always remember that the inserted text, image, link or e-mail 
will appear at the current location of the cursor, and you can 
always change this later. Finally, click on the Preview tab to see 
how the Web page will appear in a browser. 
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5.2 Microsoft Publisher 


Microsoft Office Publisher is a basic Web design and print layout 
design software bundled with the Microsoft Office suite. You can 
access it from Start > A11 Programs > Microsoft Office > Microsoft 
Office Publisher. This is a simple tool, but contains extensive tem- 
plates to make the e-mail / Web design easy. Just use the Wizard 
and chose from the various options at every stage, and your site is 
ready to roll! 

When you open Publisher for the first time or when you click 
on New Project, you will be presented with options for what you 
wish to do. For Web design, choose Web Sites and Design. Once you 
select the Web Sites and Design option, you are immediately pre- 
sented with an expanse of templates to the right of the screen. 
These templates are categorised as Easy Web Site Builder, 3 Page 
Web Site, Product Sales and Professional Services. These templates 
can, of course, be used for any content— they are templates after all. 



Selecting the design type and templates in MS Publisher 


Once you select the template of your choice by clicking on it, 
Publisher opens it up for you to edit it and add the required text. 
Depending on the template you have chosen, standard Web site 
links such as Home, About Us, Contact Us, etc. will be available. You 
can change the wording of these links and add the text for each sec- 
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The drawing toolbar 


tion. Images in the template can be changed by right-clicking on 
them and selecting Change Image > From File. There is an option to 
add a caption to the images right below each of them. 

At the bottom of 
the Publisher win- 
dow you will see the 
pages being num- 
bered. To edit the 
different parts (rather, the links— such as Home or About Us) of the 
Web page, just click on the numbers at the bottom. Each of those 
numbers takes you to a “part” or section of the site. Standard ele- 
ments such as the logo, company name, etc., will remain the same 
throughout the different sections. 

You can move the text boxes and images around the page to 
suit your liking. There is also a vertical and horizontal ruler which 
you can use if you are looking to align different elements. The 
scale is graduated in terms of resolution rather than physical 
dimensions, so you can design your site according to the target res- 
olution. Right-clicking or double-clicking on a bullet or image 
gives you the Format Autoshape option, using which you can 
change its colour. This works similar to the Format Autoshape 
option in Microsoft Word or PowerPoint. 

To attain even more customisation, you can add your own draw- 
ings using the Line, Rectangle, Oval or Arrow shape tools and add your 
own text using the Text Box, which are available through the Objects 
box. If this box is not visible, click on View > Toolbars and select the 
Objects box to have it displayed. If you wish to represent data through 
tables, just “draw” a table anywhere on the page. In the Task Pane at 
the left of the page you are designing, you will see even more tem- 
platised options for Font and Colour Schemes. If none of the options 
are to your liking, you can select the ones that are closest to your pref- 
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Select the section or page number to edit its contents 
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erence, and then customise them. Under Publication 
Designs in the Task Pane, the different designs avail- 
able give you different backgrounds and layouts, 
which, again, are customisable! 

Under Web site options, you select the orien- 
tation of your navigation links (links to different 
sections of your Web site). It is standard to place 
the links to Home, About Us, etc., vertically, 
though some designers place it horizontally at 
the top. But placing it at the bottom is a no-no 
unless you are daring to be different. It makes 
most sense to keep the links where they are easily visible. 

You can preview your design at any time by clicking on 
“Preview your Web site” in the task pane. Save the file by going to 
File > Save As and choosing “Web page”. The extension will be .htm 
(if you wish to edit this file with Publisher at a later time, save it 
as “Publisher File”). When you save your Web page as a .htm file, a 
folder is created, which contains the images and other non-text 
elements. Just upload this folder to the same directory (not a sub 
directory) as the .htm file, and your Web site is ready! 

5.3 Serif WebPlus 6.0 
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Serif WebPlus 6.0 is another 
easy-to-use code editor, and it 
comes free. It has many fea- 
tures worth mentioning. You 
can open multiple publica- 
tions at a time, and even tile 
them and drag-and-drop 
objects between them. You 
can choose from dozens of 
preset colour schemes to 
change the overall appearance 



The Serif WebPlus 6.0 main window 

of your page with a single click. 
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There is a host of inbuilt logos, Flash animations, text effects, and 
other special effects that you can drag-and-drop onto your page as 
it suits your needs. 

The various panels provide rapid and easy visual access to 
commonly used controls such as fonts, line settings, the colour 
table, etc. There are 27 graphics shapes including stars, triangle, 
arrows, polygons, and callouts to add fun and meaning to your 
Web site. The Table Editor lets you create sophisticated, colourful 
tables, which can include formatted text and spreadsheet formu- 
las. The Calendar Wizard allows you to create a calendar with a 
choice of sizes and design options. In addition to all this, there 
is a collection of 20,000 assorted Web-ready graphics, including 
animations, pictures and page elements. 

5.3.1 An example of how to create a Web page 

When you launch WebPlus, the WebPlus Startup Wizard will 
launch. It presents you with five choices. 

oUse a Page Wizard, to create an instant publication 
o Start from Scratch, to get a blank page to work on 
o Open a publication, to edit your own WebPlus files 
o View a QuickTour, to see the menu of introductory tutorials 
o Online Resources, to access the Serif and VisualCities Web sites 

To start creating your own Web page, you need to click on Page 
Wizard. This will launch as a Startup Wizard window. Select a Web 
category on the left and exam- 
ine the samples on the right. 

Click on a sample that suits your 
needs and click on Next. The 
Wizard now leads you through a 
series of steps that let you see 
the publication being assem- 
bled. We chose the “Other” cate- 
gory and “Generic 02” from the 
samples. Click on Finish. 
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In the next window that 
opens, you will be able to see a 
preview of your Web page. You 
can enter your name, the name 
of your company, and the com- 
pany slogan. Click on Next to 
go to a page where you can 
enter your address. Then, click 
Next. You can now enter your 
contact details. These include 
your telephone, mobile and fax 
address and the URL of your site. 


On the following page, you 
can enter the titles for various 
pages such as the home page, 
information page, service page 
and contact page. Click Next to 
go to the final page of the 
Wizard, where you can choose 
a suitable colour scheme for 
your page. Click Finish. 

On the right side of the WebPlus window, you’ll see a set of 
panels known as the Studio toolbar. It is a cluster of seven special- 
purpose panels. 

1. The Color panel lets you apply color and/or shading to an object. 

2. The Color Scheme panel displays a list of available colour 
schemes that lets you instantly revise colours in a Page Wizard 
publication. You can apply a colour scheme to new elements, 
customise scheme colours, or even create entirely new schemes. 

3. The Text panel provides a visual preview of different font and 
text styles, and also allows you to change the style and font of 
text objects. 

4. The Lines panel allows you to set the weight and type of lines 
and shapes. 



Enter your address and other details 

number as well as your e-mail 
Click Next. 



Enter your name, company name 
and slogan 
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5. The Gallery includes a wide variety of pre-designed elements— 
graphics you can drag and drop. 

6. The Portfolio is a container for storing design objects (pictures, 
text blocks, and even unlinked text frames) you’d like to reuse 
in different publications. 

7. The Wizard panel lets you edit Gallery objects or revisit the choic- 
es you made when creating a publication using a Page Wizard. 

When you are done creating the page, click on File > Publish 

Site, and then select “To Disk Folder” to save it to your hard drive. 

5.4 Macromedia Dreamweaver 8 


This is a state-of-the-art software that lets you easily, quickly and 
efficiently design a Web site of your own. Dreamweaver lets you do 
both hand-coding HTML if you are a coder, or work in a visual edit- 
ing environment. The visual editing feature is especially useful 
and easy for novices who know nothing about coding. It lets you 
create Web pages without writing a single line of code. You can 
view all your site elements or assets and drag them from a panel 
directly into the document. 

Dreamweaver provides you a full-featured coding environment 
including code-editing tools (such as code colouring, tag comple- 
tion, a coding toolbar, and code collapse) and language reference 
material on CSS, JavaScript, ColdFusion Markup Language (CFML), 
and other languages. You can also import your hand-coded HTML 
documents without reformatting the code. You can later reformat 
the code with your preferred formatting style. 

In addition to the above, Dreamweaver also lets you build 
dynamic, database-driven Web applications using server technolo- 
gies such as CFML, ASP.NET, ASP, JSP, and PHP. If you prefer to work 
with XML data, Dreamweaver provides tools that allow you to eas- 
ily create XSLT pages, attach XML files, and display XML data on 
your Web pages. 
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5.4.1 Getting started with 
Dreamweaver 

Launch Dreamweaver. If 
you’re launching it for the 
first time, you will be able to 
view the start page. You can 
choose a type of document 
from here. Here you can open 
a new document, create a 
new document from amongst 
the various types, or choose a sample design upon which you can 
build your own Web page. 

If you want more control and want to customise the type of 
Web page you wish to design, you need to go to File > New. You will 
view a New Document dialog box as shown in the screenshot. The 
various categories of Dreamweaver documents appear in a list to 
the left. Select one of them, and the specific document types with 
their icons will fill the list to the right. 

The following are the types of Web pages you can choose from. 

o Basic page: Standard client-side document types, such as HTML, 
ActionScript, CSS, JavaScript, and XML 
o Dynamic page: Standard server-side document types, such as 
ASP, ASP.NET, ColdFusion, JSP, and PHP 
o Template page: Blank Dreamweaver document templates for stat- 
ic and dynamic sites 

o Other: Specialised client-side document types, such as Java, 
WML, C#, VB, VBScript, and plain text 
o CSS Style Sheets: Predesigned stylesheets 
o Framesets: Predesigned framesets 

oPage Designs (CSS): Predesigned layouts using CSS layers 
o Starter Pages: Predesigned layouts with images 
oPage Designs: Pre-designed layouts using tables 

Let’s start with the Basic page. To create a standard client-side- 
only Web page, you can select Basic page from the list. Then, from 



EMI FAST TRACK 


85 




SITE DESIGN TOOLS 


WEB DESIGN 


| ft— « | , | 


Choose the type of document 


the Basic page list, select HTML. 

Click Create, and Dreamweaver 
opens up a blank Web page. 

Don’t do anything as yet; first 
save this file. This is because 
the HTML generated by 
Dreamweaver is cleaner when 
it is working with saved docu- 
ments as opposed to unsaved 
documents. Choose index.html 
as the filename because 
this is the default name 
of the home page of 
your site, that is, this 
page will load automati- 
cally when a visitor 
types your URL in the 
address field of the Web 
browser. Save this file in 
your local root folder. 

Do not put it in any of 

the subfolders, because A new Web page document in Dreamweaver 
this is your home page 
and it should be at the top of the structure. 



5.4.2 Defining the site 

You need to create a site where you can store all the files you 
would like to be on your Web site. To do this, click on Site menu 
and then on New. A site definition Wizard will open where you 
can enter the details such as the name of your Web site and its 
HTTP address or URL. Click Next. 


In the dialog box that comes up, you’re asked whether you 
wish to work with a server technology such as ColdFusion, 
ASP.NET, PHP, etc. You can choose No and click Next. You will now 
be asked where you wish to save and edit all the files. Choose a 
local path for this and click Next. 
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In the next dialog 
box, you are asked how 
you connect to the serv- 
er. Since you may not 
have Web space regis- 
tered for this purpose, 
you can choose None and 
click Next. Now click 
Done, and your site is 
locally created. You can 
always change these 
parameters later. 



The site definition window 


5.4.3 Different views in 
Dreamweaver 

You can view a document in three different ways in Dreamweaver. 


Design view 

In this view, Dreamweaver 
displays your Web page in a 
manner similar to the way 
that the page appears in a 
Web browser. You can use 
Design view to construct your 
page visually, but you should 
not rely on it for a completely 
accurate representation 
of your page. It’s more 
like a reliable estimate. 

The best way to see how 
your page actually looks 
is to actually test it in 
your preview browsers. 

Code view 

In Code view, Dre- 
amweaver displays the 




Pjcj. Mini. 

xV 6 " 

IT 

'Xl» TB. 

la 




. 



EM! FAST TRACK 


87 






SITE DESIGN TOOLS 


WEB DESIGN 


underlying code (e.g., HTML, CSS, JavaScript) of your Web page. 
Code view works like a text editor. You can directly edit and mod- 
ify the code. 

Split view (Code and Design view): 

In this view, the document 
window is divided into two 
frames. The top frame shows 
the underlying code of the 
page, and the bottom frame 
gives the visual representa- 
tion. This is great if you are 
learning HTML. You can draw 
the layout of your page and 
add content in the visual 
frame and then click in the code frame to see what’s happening 
behind the scenes. Alternatively, you can type HTML directly into 
the code frame and then click in the visual frame to see the results. 

You can switch between these views by pressing Control + [' ]. 
5.4.4 Setting up Page Properties 

Next, you need to set up a few basic properties of the page. Go to 
the main menu and choose Modify Page Properties. The Page 
Properties dialog box will appear. Most of the categories on the left 
side of the Page Properties dialog box don’t apply just yet. For now, 
you can set the most basic appearance attributes of the page, so 
let’s start with the margins. 

When a Web browser dis- 
plays a Web page, it automati- 
cally adds a small amount of 
padding between the page 
content and the browser win- 
dow. This can lead to undesir- 
able and unexpected results 
when viewed in different 



Set up the Page Properties 
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browsers, because different browsers add different amounts of 
this whitespace. It is therefore good to remove the browser’s 
default page margin entirely so that the page fits snugly in the 
browser window. 

To remove the browser’s default page margins, click on Modify 
menu and on Page Properties. Now click the Appearance category 
on the left side of the Page Properties dialog box. Navigate to the 
margin section and set the Left Margin field to “0”, and choose 
“pixels” as your unit of measurement. Do the same for the other 
three margins as well. 

The title of a Web page 
appears in the title bar along 
the top of the browser win- 
dow. It does not appear any- 
where on the page itself. You 
don’t add this information so 
much for the sake of your 
design as you do for the sake 
of good coding practice. Type 
the name of your Web site in the Title field. Use the same name 
you provided in the Site Definition dialog box. As you create new 
pages for your site, you can customise this title to reflect the con- 
tent of the page. 

Finally, you can attach a 
tracing image to the back- 
ground of the document win- 
dow. Tracing Image specifies 
an image to use as a guide for 
copying a design. This image 
is for reference only, and does 
not appear when the docu- 
ment is displayed in a brows- 
er. You can set the opacity of this image. After you have set all the 
properties, click OK to exit. 



Setting up the tracing image 



Setting the title and document type 
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5.4.5 Preview your page in a browser 

When you are done creating your page, you need to preview it in 
a Web browser. This is necessary to check if the page appears the 
same in all the browsers (which is not always the case). 

To view the page you created, press [F12], and Dreamweaver 
will launch the page in your primary browser. To launch it in your 
secondary browser (if installed), you need to press [Ctrl] + [F12], If 
you have more browsers installed and wish to preview the page in 
those browsers, you need to click on the “Preview/Debug In 
Browser” icon along the top of the document window, and select 
the appropriate browser from the drop-down list. If your browser 
is not in this list, you can add it by clicking on “Edit Browser List” 
at the bottom of the drop-down list. Check things such as whether 
the title appears in the title bar, whether the images and text are 
where they are supposed to appear, and whether the tracing 
image is visible (it should not be). 
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Microsoft 

Frontpage 



W hen it comes to Web design, there’s one program that’s very 
popular and easy to use— Microsoft Frontpage. This tool is part 
of most MS Office installations, and as a result, is one of the most 
used software for Web design. It’s simple, makes for a decent design 
tool, has loads of templates— and gets the job done in no time! 
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7.1 Getting Started 


If you are used to working with any Microsoft Office application, 
you will feel right at home with Frontpage. Throughout this 
chapter we will use FrontPage 2003, but you should have no prob- 
lems following the workshops no matter what version of 
FrontPage you have. 

To check if you have FrontPage already installed on your com- 
puter, go to Start > Programs > Microsoft Office and look for 
“Microsoft Office FrontPage 2003.” If you don’t see it there you will 
have to buy a version of office that comes with FrontPage, or just 
buy FrontPage 2003 all by itself from www.microsoft.com 
/office/frontpage/howtobuy/default.mspx. This will cost you $199 
(Rs 9,000), so it isn’t cheap— but itmightjustbeworth it if you plan 
to do a lot of design for your site. 

Of course, you can always opt for a freeware tool similar to 
FrontPage in functionality. We will tell you about some free tools 
later, but everything you read in the workshops that follow will be 
quite similar in the free HTML editors. 

Note: If you have some prior experience in creating basic Web pages 
using FrontPage or any other HTML editor, please skip directly to section 
7.4. Sections 7.2 and 7.3 are only for absolute beginners. 
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7.2 The Look 


Start up FrontPage and 
take a look at the layout of 
all the tools and menus. 

Like we said before, if 
you’ve used any other MS 
Office applications, you 
will find FrontPage really 
easy to use. 

FrontPage will start 
with a blank page by 
default, and if all you’re 
going to do is build a sin- 
gle page for yourself, you can start right away. However, the power 
of FrontPage lies in the number of templates and presets it offers 
you, so you don’t have to learn everything from scratch. 

Let’s first look at the layout of the software. Starting on the top 
left, you will see the standard toolbar that all of us Windows users 
have become accustomed to. The familiar File, Edit, View and 
other menus are there, along with the regular text formatting 
tools from MS Word. 
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The Frontpage tool and menus 


Next, you will notice that the page below is broken into two 
panes— the top one will have code in it and the bottom will be 
blank. This is the Split view that has made FrontPage so popular, 
and is now a standard way of creating HTML Web pages in most 
Web design software. The bottom pane lets you design and format 
your Web site in a WYSIWYG environment. Don’t worry, that large 
acronym doesn’t mean anything absurdly technical— it just stands 
for “what you see is what you get.” 



Frontpage looks similar to most other MS 
Office applications, so you should feel right 
at home 
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Q Design [B Split |B Code QPreview | < | 


Most people use the 
Split view so as to be able 
to change code as and 
when they want to and do 
the rest of the design in 

the bottom WYSIWYG pane, or as FrontPage calls it, the Design 


Switch views by clicking on the appropriate 
tab on the bottom left 


Irritations 


Frontpage has a few niggles, 
the most irritating of which is 
its tendency to add complete 
paths to every element in your 
page. For example, when you 
add pictures to your page, they 
get added with a local path 
rather than a relative path. 

This means that when you 
add a picture, it gets added 
with a source tag (src=) of 
something like src=“file:///C:/Documents %20and%20Settings 
/Administrator/My%20Documents/pic.jpg” rather than src=“/pic.jpg”. 
The difference between these two paths is this: the first means that 
your HTML site will only display images if viewed on your own com- 
puter, while the second will work on any computer. If you upload this 
site or page to a Web server with the paths that Frontpage provides, 
the page will point the browser of any visitor to a picture called 
“pic.jpg” that is located in the folder “C:\Documents and 
Settings\Administrator\My Documents\” on the visitor’s computer. 
Now when you check your site, you will find that everything is in order, 
but when your site is accessed from any computer but yours, all any- 
one sees is a little symbol for a missing image (generally a little white 
box with a red cross). If you provide a relative path such as 
src=“pic.jpg”, and upload both “pic.jpg” and the FITML file you created 
to the same folder on the Web server, everyone sees your site the way 
you designed it. 



Frontpage can make you tear your hair 
out at times, especially when it adds 
complete paths 
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pane. If you know nothing of HTML, and aren’t really too inter- 
ested in learning it, you can switch to the Design view by click- 
ing on the Design tab at the bottom left of your screen. However, 
we suggest you always use the Split view, for two reasons: first, if 
you make your pages in the Design pane, you can see the HTML 
code that relates to it in the Code pane, and thus learn basic 
HTML without having to cough up thousands of Rupees for 
course fees! Secondly, like any other software, Frontpage can be 
quite stubborn at times, and you might need to dabble with code 
on and off to fix some niggling problems. See the box Irritations 
for more information. 

7.3 Your First Web Page 


Let’s start off by creating a sin- 
gle, simple HTML page. Since 
you already see a blank page 
when you open FrontPage, you 
can start typing in the Design 
pane, and then format your 
page the way you want it. However, before you start typing con- 
tent, take a look at the Code pane and look for the <title> and 
</title> tags. You should find something like “New Page 1” in 
between these tags. This is the title of your page, or the text that 
will appear at the top of your browser when you open this page. 
Change this to something descriptive of the page you are making, 
or name it after your site. 

7.3.1 The content 

You can now begin typing in your content and start to format it. 
You need to make sure your page has a headline, some content, a 
picture or two, and some links. The most basic page is a personal 
page that you can create by just typing out your name, your inter- 
ests, add a picture of yourself, and then make a link for people to 
e-mail you— or just add links to your favourite sites. 



Change the Title tag of your page 
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When you type in your headline, just go 
to the Formatting toolbar and change the 
Normal style to Heading 1. This will format 
the selected text into a headline, making it 
larger in point size, and bold as well. If you 
want to change the colour of the text dis- 
played, just click on the Font Color icon 
and choose the colour you want. 

7.3.2 Inserting images 
The next step is to insert a couple of images. Before you go any fur- 
ther, save the HTML file with any name you like, and in a folder 
that you can easily access— such as a folder on the Desktop called 
“Site”. Now, you have to decide how you want sort your images. It’s 
easy to just plonk everything into one folder and then forget about 
local and relative paths, but it’s 
a nightmare to manage as and 
when you add pages and 
images to your site. The easiest 
and most widely used conven- 
tion is to place images in a fold- 
er called, umm, “images”! It’s 
not very creative, but extreme- 
ly practical. 

If you choose to save all pictures on your Web server in a fold- 
er called “images”, do the same when designing it locally, and cre- 
ate a folder called “images” in the same folder as your HTML file. 
Here, paste all the images you think you will be using for this fist 
page of yours. 

Now, to insert an image, just go to Insert > Picture > From File..., 
choose the picture you want to insert, and click OK. The picture will 
appear on your page in its original size. If it’s too large, just click on 
the picture, hold down [Ctrl] + [Alt] + [Shift] and drag a corner of the 
picture to make it a more desirable size. 



Inserting a picture into your page 
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7.3.3 Adding links 

The next thing you may want to do is add a few links to your 
Web page, because you want people to be able to click on some- 
thing other than the back or close button to navigate away from 
your page! It’s always a good idea to add your favourite links to 
your site. There are two ways to add links in sites: either you just 
type out the link, such as http://www.thinkdigit.com, which 
FrontPage (like any other MS Office program) automatically con- 
verts to a link, or you use the hyperlink option— also called the <a> 
tag in HTML code. 

Since it looks a lot better to 
have a link called ThinkDigit 
rather than http://www. think 
digit.com/, in the text of your 
page, we’ll always use 
FrontPage’s Hyperlink feature 
to add links. In the example 
page that we’re showing you 
screenshots of, we typed out 
“Here’s a uuLinlcuu to 
uuDigituu”. As you can see, the 
words “Link” and “Digit” are 
underlined. When you add 
links, you will notice that they 
turn blue, so as to distinguish 
between regular text and links. 

All you have to do is select the word(s) you want to change into 
a link and then go to Insert > Hyperlink..., or simply press [Ctrl] + 
[K]. This will bring up the “Edit Hyperlink” box, where you just type 
in the Web address and click OK. 

As you will see in the Edit Hyperlink dialog box, you have sev- 
eral options available to you. On the left you will see: 



Insert hyperlinks into your pages to 
point to different Web sites, another 
page in your own site or even your 
e-mail address 
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□Existing File or Web Page: With 
this option you can just type in 
the URL of a site, or a link to a 
page, file or image that will be 
located on your Web server 
itself. For URLs, you will need 
to add the complete address, 
including the “http://”, while 
for pages or files that will be 
located on your Web server, 
you can add a relative path 
such as “/images/pic.jpg” (if 
you want your hyperlink to 
point to a file called “pic.jpg” 
located in a folder called 
“images” relative to the page you are editing. 

Another cool function is accessible from the Target Frame... 
button on the right of the Edit Hyperlink dialog box. Click this and 
then select “New Window” if you want your visitors to be taken to 
the link without browsing away from your site. 

o Place in This Document: This is where you can link to book- 
marks, which we will explain later in this chapter. 

o Create New Document: Create New Document: You can choose 
to create a new document you want to link to, but haven’t made 
yet. Let’s say you want to create a link to a “Pictures” page, but 
haven’t started designing it yet. Using the Create New Document 
option from the Edit Hyperlink dialog box will allow you to fix 
the name for your picture page right now, and create a blank 
page called, say, “pictures .html”, and save it in the desired loca- 
tion. The advantage is that later, all you have to do is edit the 
pages you want to link to, 
rather than creating them 
later and having to remeber 
what you linked to them as. If 
you create a page later and 
call it “picture.html”, but 

linked to it from your home 

. , Make sure you use the Create New 

page (generally mdex.html) as Document option t0 Mnk t0 pages 

“pictures.html”, you’re going that you haven’t created yet 




Use the Target Frame button to 
choose how a browser opens your 
hyperlink 
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to have a lot of people clicking on a dead link and getting “Error 
404: Page not found” instead of your Pictures page. 

o E-mail Address: This option allows you to make a link that, when 
clicked, will open the visitor’s e-mail editor and insert your e- 
mail address into the “To:” field. It’s like a shortcut to e-mailing 
you, and you can even choose the default subject for the mail! 

You can also make your pictures link to URLs instead of just sit- 
ting there on your page. Doing this is identical to how you link 
text, except that you have to click on the picture and then press 
[Ctrl] + [K] to get to the Edit Hyperlink dialog. 

Once you’re done making all your hyperlinks, adding all your 
pictures and formatting your text, remember to save the page 
before closing FrontPage. Congratulations, you’ve just made your 
first basic Web page! 

Read on to find out how to do a little more with FrontPage, but 
remember the basics we’ve talked about in this section because we 
will expect you to know how to do everything mentioned here! 

7.4 Prettying Up Pages 


In the previous two sections, we learnt the absolute basics of Web 
page design using FrontPage. Now we get to the interesting bit- 
using FrontPage to design a Web page that is more than just a 
white background with basic links, pictures and text. Here’s 
where you get to show off your individuality. 

7.4.1 Changing colours 

Let’s start with customising the colours of your page and the text 
and links in it. 

Many people prefer light text on dark backgrounds, rather 
than the standard black text on white backgrounds. Also, you 
might want to add purple text on an ugly yellow background— just 
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because you want it that way! 

Well, here’s how you go about 
changing the background 
colour of your page: right-cliclc 
on a blank part of your page in 
the Design pane and select Page 
Properties..., and you should see 
the Page Properties dialog box 
pop up. Now, click on the 
Formatting tab, and under 
Colors, you will see five drop-down boxes: Background, Text, 
Hyperlink, Visited hyperlink and Active Hyperlink. Just select the 
colour you want to set for each of these options and click OK. (A 
visited hyperlink is a link that a visitor has already clicked on and 
then returned to your page. An active hyperlink is a link to the 
very page that a visitor is at, such as in a Links box, where a link 
to every page in your site is displayed— including the current page!) 

It’s usually a good idea to leave all the hyperlink colours at 
their default, and not setting either your text or background 
colours to what these are set to by default— why mess with Web 
conventions, right? 

7.4.2 Picture backgrounds 

Of course, you don’t have to use a plain background to adorn your 
site, and you can use a picture instead! Go back to the Page 
Properties dialog box, and under Formatting check the 
“Background Picture” and the “Make it a watermark” boxes. Now 
click on Browse, select the picture you want to use, and click OK. 
You should now see the path and name of the picture. Next to the 
Browse button that you clicked earlier, you will see a Properties 
button; click it and then click the “Picture File Type...” button you 
see in the next box. Here you’ll have options to change the image 
to a GIF, JPG or PNG file, and the quality settings to use. Uncheck 
the “Use image as is” box, and then set Quality to 50 and 
Progressive passes to 2 if the image is larger than 20 KB. 
Progressive passes indicates how a browser will display your 
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Access the Page Settings to change 
the default background and text 
colours to whatever you want 
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image, so if a visitor with low bandwidth visits your site, he or she 
will be shown a very low quality rendition of the background 
image immediately, and then the image will clear up as it is com- 
pletely downloaded. 

In the same Picture File Type dialog, you will see the difference 
in file size of the image as you reduce the quality setting. 
Generally, a quality of 60 per cent for JPEG images is quite accept- 
able, and can reduce file size by as much as 10 times! Thereafter, 
between 60 and 1 per cent, you will hardly find a difference in file 
sizes, but will see a dramatic loss in quality of the image. We rec- 
ommend always using 60 per cent or more as the Quality setting. 

Now click OK thrice to get back to your page. You will see the 
background has become the picture you selected. Sure beats white 
or black, doesn’t it? 

7.4.3 Buttons 

Instead of boring old links, 
especially when you link to 
other fixed pages of your site, 
you can add buttons. Though 
these are nothing but graphic 
links, they’re a lot prettier than 
plain text. They are generally 
small as file size goes, and if 
you use the same buttons 
throughout your site, a few KB 
more is all that your site’s file 
size will be. 

Frontpage has a lot of preset buttons for you to choose from, and 
with all the colour combinations possible. In order to add a button, 
you need to be set with two things: the name of the button and the 
page to which it links. Let’s take the example of our “pictures” page 
we mentioned earlier, and create a button for it on our test page. 
Choose the place in your page where you want to insert the button 



Insert buttons into your page to give 
it a better look 
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and click on Insert > Interactive Button. You will see the Interactive 
Buttons dialog as well as three tabs: Button, Font and Image. 

You will see a long list of button styles, and an interactive pre- 
view where you can see how the button behaves when you hover 
your mouse over it and how it looks when you click it. You add the 
button text into the Text field, and the link into the Link field. 

You can click on the Font tab and edit the way the text in the 
button behaves. You can select different colours of text for 
mouse actions (hover or click) and change the font and size of 
the text. 


Next, click on the Image tab 
to select the size of the image 
and how it behaves. If you are 
using a picture background, 
make sure to select the “Make 
the button a GIF and use a trans- 
parent background” radio but- 
ton. If you’re using a fixed 
colour background, you can 
choose to set that same colour 
as the button’s background, but 
it’s always a good idea to use 
GIFs with transparent back- 
grounds, in case you decide to 
change the background colour 
of the page later. 

In case you want to add more buttons, and you’ve considerably 
personalised the first one, it’s easier to copy and paste the one 
you’ve made and then just edit the text and link fields instead of 
personalising them all one by one. This way, your page or site will 
have all the same button characteristics, and it will be neat— with 
only the text and links for each changing. 



Set the Image properties for your 
button 
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7.4.4 Layers 

Often, you will see sites that 
have blocks of content, with pic- 
tures and images running side 
by side. By default, in FrontPage, 
even if you select the picture 
and set a wrapping style, you 
will not get any control of the 
way the text flows, and you will 
have to use [Enter] or [Shift] + 

[Enter] to manually wrap the 
text, as you can see in the image 
alongside. 

In order to arrange the text 
better and utilise all the blank 
space that’s next to an image, 
you can use layers. In order to 
add a layer, go to Insert > Layer, 
and you will see a box called 
something like “Layer 1” appear. 

Click on the layer name to select 
it and then drag and place it 
where you want it. You can 
resize it to fit your page and 
then type the same text you wanted into that layer. As you will see 
from the image, the text looks wrapped and much neater now. 

This layer you just added will have no border, and will just look 
like text placed alongside the picture. However, if you want to 
clearly demarcate a layer and make it look like a box, you can do 
so from Layer Properties. Just right-click on the layer and select 
Layer Properties. A pane on the right called Layers will open. This 
will show you all the layers in your page, and you can edit each 
one’s properties by selecting it and then clicking on Borders and 
Shading..., Positioning, or Behaviors, which are links at the 
bottom right. 



You cannot just place text near an 
image 



Insert a layer and position it in your 


page 
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If you click on Borders and Shading... you will see many 
options, most of which are self-explanatory. There is also a pre- 
view so you can easily figure out what each setting does. We 
chose to make our layer an Inset; you can choose whatever suits 
your taste. 

Next, you can click on the Shading tab and choose whether to 
just leave the layer background blank (default) or whether you 
want to change the background colour, or even add a background 
picture to it. 


If you want to use text wrap- 
ping, you will need to click on the 
Positioning link at the bottom 
right and then select which style of 
wrapping you need. By default, it is 
set to no wrapping, so set this to 
how you want this layer to wrap 
around the page content. 


Under Behaviors, you can set 
various advanced script options, 
such as JavaScript code behaviours, 
handlers such as mouse-over and 
mouse click, setting specific browser behaviours and more. Once 
you’re comfortable using FrontPage, you can come back here and 
use some of these features. 

One thing you might have noticed is that when you visit a few 
pages on the Net using browsers other than Microsoft’s Internet 
Explorer (IE), you are redirected to a page that says your browser isn’t 
supported. Though we all hate these warnings, the fact is that sites 
created in FrontPage are best viewed in IE. So when testing your site, 
if you find that certain things do not work with other browsers, you 
can set a layer to check for which browser is being used and then for- 
ward it to a page that tells the visitor that his or her browser is not 
supported. It’s a very basic implementation, but it works. Just go to 



Use Positioning to select the 
wrapping style for your layer 
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Behaviors, click on Insert, 
and select Check Browser. 

You will see the Check 
Browser dialog as shown in 
the screenshot. Here, select 
the actions you want, such 
as redirecting to an error 
page (which you should 
remember to create) when a 
certain browser is detected. 

Remember, this is very irri- 
tating, so unless you really have compatibility problems with some 
browsers, you shouldn’t use this feature. 

7.4.5 Bookmarks 

Some of us like to rant and rave— especially on our Web sites! This 
can lead to some very long pages indeed, and just navigating a sin- 
gle page might require a lot of scrolling. This is very user-unfriend- 
ly, and you need always make sure your pages are a breeze to nav- 
igate— or else you’re not going to be getting many visitors. 

This is where bookmarks come in. Just as you would mark a 
book with little tags, denoting where particular passages are, 
you can mark your site with bookmarks so that visitors can 
directly go to the content they want by clicking instead of simul- 
taneously scrolling and scanning the text. 


For pages with a lot of 
content, it’s a good idea to 
add bookmarks to every 
section you’ve made, and 
add links to those book- 
marks as high up on the 
page as possible— prefer- 
ably so that the links are 
visible without a visitor 
having to scroll at all! 



a Web page 
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Let’s use the text in §7.3 as an example. We just created a new 
file and pasted §7.3 into the page. Pages online can contain 10 
times or more content than what we will show you, and obvious- 
ly, are an even bigger pain to navigate. 

We laid out §7.3 in a Web page, and placed images with wrap- 
ping, and found that it was quite a scroll to get to the bottom, 
especially if you’re at a resolution of 800 x 600. So we added book- 
marks to every sub-section and added links to each sub-section at 
the top of the page. Here’s how you can do the same thing. 

First, select the first point you want to bookmark— which in 
our case was at “7.3.1 The Content”. Now go to Insert > 
Bookmark ([Ctrl] + [G]), and give the bookmark a name. Ours was 
a simple “731”. 

Now, repeat the same procedure for all the points in your page 
you want to bookmark, and you now have the tags ready. The next 
step is to use these tags by making links— preferably at the begin- 
ning of the page, in plain view of a visitor— and then hyperlinking 
them to the corresponding bookmark. 

As you can see in the image, we had three links placed at the 
top of the page for the three bookmarks. Now, click on the Preview 
tab at the bottom left and check to see how the links work. 

Now you’ve sorted out how to get visitors to quickly click on 
the content they want to read about, but what happens when 
they’re done reading and want to see the rest of the content you 
listed at the top of your page? This is where the “Back to Top” link— 
which you’ve probably seen many times online— comes in. 

Just click on the first line of your page, press [Ctrl] + [G], and call 
the bookmark “Top”. Now, add the text “Back To Top” at the end of 
the content associated with each bookmark you added before. This 
will help visitors get back to the list with ease after they’re done 
going through the content under the bookmark they clicked. 
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That takes care of all the 
basic things you need to 
know in Frontpage. Of 
course there are hundreds 
of more options and fea- 
tures available, but those 
are things best learnt by try- 
ing them yourself! 



The bookmarked and linked final page is a 
lot easier to navigate 


7.5 Templates 


So far we’ve shown you enough to get you started with designing 
pages individually. Now we’ll get into some workshops to better 
understand how you can use the power of FrontPage’s templates 
and preconfigured settings to create a powerful HTML-based site. 

7.5.1 Web site templates 

If you want to build a Web site, and not just random pages all 
linked together, you can do it a lot faster if you use FrontPage’s 
Web site Templates option. If you go to File > New, you will always 
get a blank page to begin with. However, below the File menu, 
there’s an icon that looks like a blank page which has an arrow 
next to it. Click on this arrow and you will see the Page, Web Site, 
Blank Page and Text File options. If you select Page, you will get a 
Page Templates Wizard that will help you choose from FrontPage’s 



Select Web Site to start building a new site from a template 


EM! FAST TRACK 


119 




VII 


MICROSOFT FRONTPAGE 


WEB DESIGN 


presets. If you select Web Site, you 
will get a similar wizard for a precon- 
figured collection of pages (a Web 
site). 

If you’re looking to set up a site for 
your company, FrontPage will make 
the job a lot easier, because it’s built 
mainly to handle online design for 
small businesses, and the inbuilt tem- 
plates will prove it. Choose from 
amongst the many templates, such as 
Corporate Presence Wizard, Customer 
Support Web Site, Project Web Site 
and more, or click on the Packages 
tab to select between a News and 
Reviews Site or a Web Log (blog). We 
chose “Personal Web Site.” 

Now, if you want to save your site to a particular folder, click 
on the Browse button on the right and tell FrontPage where you 
want it saved. By default, all pages and Web sites are saved in the 
My Webs folder under My Documents. 

When you click OK, FrontPage automatically adds the most 
commonly-used pages for the template you selected. In our case, 
we got pages such as About Me, Favorites, Feedback, Interests, and 
a Photo Gallery. Obviously, when you choose a business site, the 
pages made available are different. For example, if you choose the 
Corporate Presence Web option, a Corporate Presence Web Wizard 
will pop up and guide you through setting up your site by asking 
you for a few details. See the large screenshot above to understand 
how detailed the setup Wizard is. 

Now, back to the Personal Web Site template we chose: you 
need to start from the index.htm page, which will be your home 
page. Here you will see predefined blocks with text in them. This 



You can use either the Page or 
Web Site Templates to help 
you quickly set up a pre- 
configured site 
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As you can see, the Corporate Presence Wizard is very thorough 


is nothing but directives 
that FrontPage gives you 
to tell you what content 
you can or should put in 
a certain block. Here you 
will see a link bar on the 
left, and blocks that 
describe the other pages 
in your site. After this, 
editing each page is the 



The Personal Web Site template that 
Frontpage automatically builds for you 
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same as we’ve shown you earlier in this chapter. The advantage 
with using the templates is that all your cross-linking (linking 
from one page in a site to another) is already done for you. All 
you need to do is edit, not create! 

7.5.2 The photo album 

The most common thing on most personal sites on the Web is a 
photo album. With digital cameras proliferating and almost every 
phone being capable of images of decent resolution, there’s been 
an explosion of personal pictures on the Web. However, you will 
find that many people do not display their pictures properly, and 
some even just put them all into a folder on their server, leaving 
people (friends, family or even strangers) no choice but to click the 
image name to see what it contains. 

To begin with, leaving the names of the pictures as what the 
digital camera names them is a crime— OK, so it isn’t one, but it 
ought to be! How can you expect people to sift through names like 
“DSC000102.jpg”? Besides, it’s not very search engine-friendly, and 
God knows, we all want to be noticed by Google these days! So the 
first thing you need to do is come up with a naming convention 
for all your pictures. This could be absolutely anything you feel 
comfortable with, because you are the one who has to sort them 
out. An example is “060525_Digit_Products_Games_Half_ 
Life2_04”. Here you can see that there are multiple tags taken care 
of: there’s the date tag right in the beginning, so every image is 
automatically sorted in ascending order of date. Then there’s the 
word “Digit”, which indicates that this image was used in Digit. We 
also know that this is a “Product” image of a “Game" called “Half 
Life 2”, and that this is the fourth such image. All that informa- 
tion available to you (and let’s not forget Google) without even 
looking at the actual image! 

You can come up with your own naming convention for all 
your images and sort them all out nice and neat. You have to 
continue to do that on your Web site, and this is easiest done 
by creating albums. Once you’ve sorted all your images into 
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albums, you can begin 
working on the HTML 
page(s) for your online 
photo album. Click on 
the arrow next to the 
blank page icon under 
the File menu and select 
Page. You will see the 
Page Templates dialog, 
from where you should 
select the Photo Gallery 
option. A new page will open up with some preset images. 



If you double-click the default images that are displayed, you 
will see the Photo Gallery Properties dialog box. From here you can 
add all your images and then select how the gallery is displayed. In 
the Pictures tab, you can add or remove all the pictures you want, 
and also set a default size for the thumbnails. Yes, FrontPage gener- 
ates thumbnails for all the images you add into your photo gallery, 
and adds “thumb_” before the name of each image to easily identi- 
fy. In the Pictures tab, you can set a caption and description for each 
image— the caption is added as the tool tip (the text that is displayed 
when you hover your mouse over the image) and also below or 
alongside the image. The description is then added below that. 
Make sure to always have captions for your images, even if you’re too 
lazy to type out entire descriptions— you can save that for the 
description of the entire photo album. 


Clicking on the 
Layout tab will let 
you control how the 
gallery is displayed. 
You will see four 
options: Horizontal, 
Vertical, Montage 
and Slide Show. The 
most popular is 



The Photo Gallery Properties dialog box will let you 
control how the gallery looks 
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Slide Show, and we’re not about to argue with the world, so we 
used it ourselves. 

You need to remember that each one of these pages is one of 
your albums, so if you have 10 albums, you will have to create 10 
such pages and then create a Photo Gallery home page where 
you can link to the other 10 pages and show a few images from 
each album. 

Overall, FrontPage’s Photo Gallery is no match for some of the 
free and open source image galleries available on sites such as 
sourceforge.net, but it’s good for people who don’t want to get 
their hands dirty with PHP code and MySQL databases and the 
like. Plus, the advantage of HTML is its simplicity— just upload all 
the files and your Web site works; no database servers to worry 
about— and thanks to FrontPage, no coding either! 

7.5.3 Just copy 

Some might laugh and say that this is the Indian way, but jokes 
apart, if you come across an HTML-based site on the Web that you 
like, and want to base your site on that design, you can just down- 
load the site using FrontPage. Of course, you need to remember 
that you don’t want to indulge in plagiarism, so you should men- 
tion somewhere in your site that your design was inspired by the 
site you downloaded! 

FrontPage has an Import function that will let you copy an 
entire site— or part of it— to your computer, and let you start edit- 
ing and personalising it. Just go to File > Import, and the Import 
Web Site Wizard will pop up. You will see many options for how to 
import a site, the most important of which are FTP and HTTP. To 
import a site from FTP, you will have to have its FTP username and 
password (which means you probably own the site), but with HTTP, 
you can just copy a site and all the images and files it contains that 
are publicly visible. 
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Select the HTTP 
radio button and 
enter the URL of the 
site you’re “inspired” 
by. Now click Next, 
and FrontPage will 
check to see if the 
site is online. Once it 
finds the site, it will 
give you a few 
options, such as how 
many levels to down- 
load, and whether to download only images and Web pages or all 
files available. Select the desired settings, and sit back and wait till 
FrontPage downloads it all. Remember, if you do not limit the lev- 
els (how many links away from the home page) that FrontPage 
should download, you might end up waiting for a very long time 
indeed! Ideally, don’t set anything more than 20 levels, or you will 
start greying while you wait for the download to end. 

Once the download is complete, FrontPage will open the site 
just like any other Web Site you created on your computer. Now 
you can start editing the site and personalising it. Remember, give 
credit to your inspiration! 



Use FrontPage’s Import option to copy a site to 
your hard drive 
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Content Management 
Systems 



S ay you have a Web site and want to expand your business. 

Wouldn’t you want prospective clients to preview your 
products on your site? You will probably spend days working on 
the site design. Wouldn’t this time be better spent in ironing out 
bugs and adding even more features to your software? Now say you 
can’t afford to hire a Web designing company... there is a solution: 
the Content Management System, or CMS. 
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8.1 Why Do I Need A CMS? 


8.1.1 What is a CMS? 

What exactly is a CMS? From Wikipedia, “a content management sys- 
tem is sometimes a Web application used for managing Web sites and 
Web content, though in many cases, content management systems 
require special client software for editing and constructing articles.” 

Simply put, a CMS is an application that makes developing Web 
sites that much easier. All you will ever need to do is upload and 
install the CMS on your server! Not only is it cheaper, it also saves 
you time— time that can be spent giving the killer edge to your soft- 
ware. It is this time that will hold the key to the success of your busi- 
ness. Wouldn’t you want to utilise it in the best possible manner? 

Here, we will look at the Web Content Management Systems 
that will help make developing your site a more pleasant affair! 

8.1.2 Advantages of PHP-Based CMSes 

There are various types of Web Content Management Systems, but 
the two main types include PHP-based and ASP-based CMSes. PHP- 
based CMSes are more popular than the rest. The advantages that 
PHP-based CMSes enjoy over others are: 

o These Content Management Systems are based on PHP, which is 
a relatively easy programming language to learn, 
o PHP is cross platform, so you need not worry about the OS or 
hardware you’re running. In most cases, it will be supported, 
o PHP, like other open source Software, has a community of devel- 
opers willing to resolve your queries, 
o Most of these CMSes are free. 

o PHP-Based CMSes are easy to modify and do not require exten- 
sive support, which is ideal for small businesses and independ- 
ent developers. 

o Most hosting companies support PHP, so choosing a host won”t 
be a problem either. 

o Generally, these CMSes are more secure than the others, though 
security largely depends upon the user. 
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8.2 A Web Server On Your Home Computer! 


Before looking at the content management systems, let us look at 
some software packages that help us to run these scripts on our 
computers. Suppose you own a small business and have developed 
a Web site for it using a CMS. Before uploading it to your server 
and launching it, wouldn’t you want to test your Web site? As in 
software development, bugs tend to crop up no matter how hard 
you try ironing them out. So, wouldn’t you want to test your Web 
site thoroughly before uploading it? Besides, uploading files again 
and again is time consuming. 

There are various applications available to help you install and 
run the required software necessary for running a Web server 
right on your computer. All this without any prior knowledge 
required! So, if you own a business and don’t quite understand 
what Apache, MySQL or PHP mean, don’t worry. Software packages 
such as EasyPHP and XAMPP are specifically developed for this 
very purpose. 

8.2.1 EasyPHP 

EasyPHP, like XAMPP, is a software package that installs Apache, 
MySQL and PHP on your computer, so that you can test and run all 
your PHP-based Web sites without uploading it to a Web server. 
Apache is an extremely successful open source Web server. MySQL 
is an open source database system that’s been adopted at large by 
the Web hosting community. 

8.2.1 .1 Installation 

Installing EasyPHP is relatively simple. All you need to do is down- 
load the software from their site (www.easyphp.org) and install it. 
After installing EasyPHP, launch EasyPHP from Start > Program 
Files > EasyPHP 

The program will launch and will automatically start Apache 
as well as MySQL. Open your favourite browser and go to 
http://localhost or http://127.0.0.1, and if all is well, you will get a 
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EasyPHP welcome page! This means that both Apache and MySQL 
are working fine, and you”re all set to test your sites now. 



Before moving on, let us 
tweak our installation of 
EasyPHP a bit. We will be 
editing the PHP 
Configuration file. Go to 
C:\Program Files\ 

EasyPHPx-x\php\ and edit 
the php.ini file. In php.ini, change the value of the 
“display_errors” field to off. If error displaying isn’t turned off, it 
might create problems with some CMSes. 


The EasyPHP interface is simple and 
uncomplicated 


8.2.1.2 Usage 

EasyPHP is a very powerful 
but at the same time a very 
easy-to-use software pack- 
age. You can modify, admin- 
ister, and run the server on 
your computer without any 
prior experience! 

Let us look at the differ- 
ent options available in EasyPHP. On clicking the little “e” icon 
next to the Apache button, you will get a drop-down menu with 
options for configuring as well as administering your server. 

The Help menu is intended for those new to EasyPHP, and 
contains basic information and a set of Frequently Asked 
Questions (FAQs). 

The Configuration menu enables you to modify files relating 
to the Apache, MySQL, PHP and PhpMyAdmin installations for 
further fine-tuning your server. You can also check out the plug- 
ins and configuration files of PHP, MySQL, Apache and 
PhpMyAdmin by clicking on Administration. 
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To run and test your site 
using EasyPHP, you need to 
place the files in the “www” 
directory in C:\Program 
Files\EasyPHPx-x\ 


For example, let’s 
assume you’ve developed a 
site using a CMS and have placed the files relating to the site in the 
directory “xyz”. To install and run the CMS on EasyPHP, you will 
have to place the “xyz” directory in the “www” directory as men- 
tioned above. Now, you can install and access your site at 
http://localhost/xyz/ 

We will talk about the features as well as the installation part 
of different CMSes in the next section. 

8.3 PHP-Nuke 



The drop-down menu offers many options 


8.3.1 Introduction 

PHP-Nuke is one of the most popular content management sys- 
tems around, with a huge user base. PHP-Nuke is free software, 
and is released under the GNU General Public License or GPL. It 
was originally based on Thatware, a popular news portal system. 
The current version is 7.9. 

Until Version 7.5, the latest version of PHP-Nuke was available 
for download on their site. However, since version 7.5, a small fee 
($10) is charged for downloading the latest version of PHP-Nuke. 
However, being free software and licensed under the GPL, you can 
freely distribute the source code of PHP-Nuke. 

According to the developers, the fee paid for downloading PHP- 
Nuke is used for the further development of the CMS. Besides, for 
small businesses and independent developers looking for a CMS, 
the fee is small considering the features offered by PHP-Nuke. 
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However, earlier versions of PHP-Nuke are available for download 
free of cost. 

Security is an issue relating to which PHP-Nuke has been criti- 
cised in the past. But security is a debatable issue, and as men- 
tioned earlier, depends largely upon the user. 

8.3.2 Features 

PHP-Nuke is a modular CMS, which means you can turn on and off 
its modules whenever you want. PHP-Nuke has all the features 
you’d require for running and maintaining a Web site. 

o For businesses and developers looking for a download manager, 
PHP-Nuke has a fully-featured Download Management system 
with advanced options. 

o PHP-Nuke has a fully-featured WYSIWYG editor for posting news 
and articles. 

o For developers who would want to provide support on their Web 
site, PHP-Nuke has an integrated Forum system powered by 
PhpBB. 

oYou can also turn on and off different modules and blocks from 
the Administration menu. In addition to this, you can install 
add-ons to further enhance your Web site! 
o PHP-Nuke also offers Journals (blogs) for registered members to 
post their own articles. If you want to send a newsletter or bul- 
letin to your customers, PHP-Nuke has an option for this too! 

PHP-Nuke is a good CMS, though we’d like the developers to 
work on the installation part as well as the security. 

8.3.3 Installation 

Installing PHP-Nuke under EasyPHP is quite easy. The installation 
process, in detail, is as follows: 

1. Download the latest version of PHP-Nuke from 
www.phpnuke.org. Extract the PHP-Nuke archive. You can use 
WinRar for this purpose. 
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2. After extracting the archive, ensure that the folders “html” and 
“sql” are present. Copy the nulte.sql file from the “sql” folder to 
the Desktop. Let’s assume that we will be installing PHP-Nuke in 
a directory called “nukel”. 

3. Create a new folder called “nukel” and copy the contents of the 
“html” folder into it. 

4. Place the “nukel” folder in the “www” directory in C:\Program 
Files\EasyPHPx-x\. Ensure that EasyPHP is running. 

5. Now, point your browser to http://localhost/mysql/. If EasyPHP is 
running, you will be logged into PhpMyAdmin. The default user- 
name for MySQL on EasyPHP is “root”, and the password is dis- 
abled, that is, it’s blank. 

6. In the main PhpMyAdmin menu, under “Create new database”, 
enter the database name “phpnuke” and click on “Create”. If the 
database creation is successful, you will be browsing the “php- 
nuke” database. 


7. Under the “phpnuke” 
database, click on “SQL” 
on the top bar. Under the 
sub-heading “Location of 
the textfile”, click on 
Browse and select the 
nulte.sql file, which we 
copied to the Desktop. 
Now click on “GO”. 

8. We now need to edit the 
configuration file to 
enter the details about 
your server. Go to 
C:\Program 
Files\EasyPHPx- 




Installing the PHP-Nuke Database 
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x\www\nulcel\ and edit the config.php file. Once the file is 
open, the editing is pretty simple. Under $dbuname, enter 
“root”, since it is your MySQL username. Let the Sdbpass field 
remain blank, as we said in point 6. Change the value of the 
$advanced_editor field to “1”. 

9. It’s done! Assuming you followed all the steps correctly, when 
you point your browser to http://localhost/nukel/ you should get 
your very own PHP-Nuke installation. 

10. Next comes another 
important part. On the 
home page of your PHP- 
Nuke installation, you 
will get a link to create 
the super user. Click on 
it, enter your details 
and register the 
account. This will be the 
administration account 
that will be used to 
manage your Web site. Now log in to the administration menu 
and start modifying your dream site! 

8.3.4 Resources 

Being one of the most popular CMSes, PHP-Nuke has lots of sup- 
port Web sites, which offer themes, patches, modules and other 
utilities. 

One of the best sites for customising PHP-Nuke is 
Nukeresources.com. The site offers add-ons, fixes and themes for 
all versions of PHP-Nuke, right from 4.x. Another Web site that 
specialises in PHP-Nuke security is Nukecops.com. This is a must- 
visit for everyone planning to use PHP-Nuke as their CMS. 

Nukemods.com offers beautiful themes for PHP-Nuke. They are 
very popular within the PHP-Nuke community. 



The PHP-Nuke Administration Menu 
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BestTests.com is a popular site based on PHP-Nuke. It offers free 
practice tests for various entrance exams. 

MyTechDept.com is another side powered by PHP-Nuke. It offers 
the latest security patches and information about virus threats. 

8.4 Mambo 


8.4.1 Introduction 

Another popular CMS, Mambo is very easy to use. It is an open 
source CMS developed by the Mambo Foundation, which is a non- 
profit organisation. The current version of Mambo is 4.5.4, which 
is the final release in the 4.5.x series. The developers are focused 
on the next version of Mambo— 4.6— which is expected to introduce 
many new features. 

The minimum requirements for Mambo are Apache (version 
1.3.19 or above), MySQL (version 3.23.x or above), and PHP (4.2.x). It 
works well with most browsers, including Firefox, Internet Explorer, 
Safari (Mac) and Opera. Mambo has had its share of controversies, 
however. In 2005, due to internal disputes, a breakaway faction of 
Mambo developers formed Joomla, a CMS based on Mambo. After 
this, the rights to the Mambo CMS code base were transferred to the 
Mambo Foundation. Mambo is released under the GPL. 

UK magazine Linux Format adjudged Mambo as the Best Free 
Software Project of The Year in 2004. Mambo was also named the Best 
Open Source Software Solution at LinuxWorld, San Francisco, in 2005. 

8.4.2 Features 

Mambo can be used for everything ranging from personal journals 
to complex professional Web sites. Some of the unique features of 
Mambo are: 

o Unlike PHP-Nuke, the installation and administration of Mambo 
is simple. The Admin menu is clean and well-defined. 
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o Mambo features a page caching mechanism, which improves 
performance in sites with heavy traffic. 

o A fully-featured WYSIWYG editor is built into Mambo with sup- 
port for scheduling and Flash content. 

o Mambo features Search Engine-Friendly URLs, which help your 
search engine rankings. 

o Mambo also features an Advertisement Manager for displaying 
and managing the ads that will be displayed on your Web site. 

o Different bulletin board systems such as vBulletin, PhpBB, and 
SMF can be integrated with Mambo. 

o Mambo has a large developer and user community ready to help 
people with Mambo-related queries and problems. 

8.4.3 Installation 

1. Download the latest version of Mambo from www.mamboserv- 
er.com. We recommend using WinRar to extract the tar.gz archive 
on Windows. 

2. Copy the extracted con- 
tents to a new folder 
“mambo”. Place this fold- 
er in the “www” directo- 
ry in C:\Program 
Files\EasyPHPx-x\ . 

3. From here on, the instal- 
lation is pretty simple. 

Point your browser to 
http://localhost/mambo/. 

Mambo will run a pre- 
installation check. If 
EasyPHP is running, the check will be successful, and you can go 
ahead and install Mambo! 

4. After Mambo runs the pre-installation check, click the Next 
button at the top of the page. You will now have to enter the 
server details. 

5. Here, under “Host Name”, enter “localhost”, then input your 
MySQL user name i.e. “root” and leave the MySQL Password 
field blank. Enter the database name as “mambodb”. Click 
Next. If you entered the details correctly, you will be taken to 
the next step. 



The Mambo pre-installation check 
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6. You will get a page to 
confirm the site details. 

Here, the URL should be 
http://localhost/mambo 
and the Path should be 
C:\Program 
Files\EasyPHPx- 
x\www\mambo. Enter 
your mail ID and admin 
password as well. 

7. If all goes well, your installation of Mambo will be complete! 
Now click on the “Administration” link, enter your details, and 
start modifying your site! 

8.4.4 Resources 

Mambo has a huge base of resource sites. 

MamboXchange.com is a 
site that connects Mambo 
developers from around the 
world. Here’s where to go if 
you’re interested in the devel- 
opment of Mambo. 

MamboDesign.co.uk offers 
the latest and best Mambo tem- 
plates. It has both free as well 
as paid templates for your Mambo-powered site. 

Mambopower.net is another Mambo modification site offerings 
lots of modules, hacks and templates. Newropeans-Magazine.org is 
a news site based on Mambo. According to Alexa, it is one of the top 
10 media sites in the world. 

Mitsubishi.com.pl is the Web site of Mitsubishi Motors, Poland, 
which uses Mambo as its CMS. 



Mambo’s Administration Module 
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8.5 PostNuke 


8.5.1 Introduction 

PostNuke is a popular CMS and is based on PHP-Nuke. It is classi- 
fied as open source software and is released under the terms of the 
GPL. This CMS is developed by the PostNuke Software Foundation, 
and is offered free of charge. 

The requirements of PostNuke include PHP (version 4.1.0 or 
later) and MySQL (version 3.23 or later). The developers recom- 
mend the use of Apache Web server for taking advantage of 
PostNuke ShortURLs technology, which makes the site URLs short- 
er and more search-engine friendly. 

As mentioned earlier, PostNuke is based on PHP-Nuke. It was 
developed by a few users of PHP-Nuke, who felt that the develop- 
ment environment should be free. The current version of 
PostNuke is 0.762, and version 0.800 is in the works. 

In 2005, the German PostNuke Community won the Galileo 
Computing Open Source Sponsorship presented by Galileo Computing. 

8.5.2 Features 

PostNuke is a CMS that can be used out of the box. Unlike PHP- 
Nuke, you don’t need to customise PostNuke too much. It is anoth- 
er modular Content Management System in which you can turn 
on and off the various modules whenever you want, 
o PostNuke is a very secure CMS, and the developers acknowledge 
security an area of prime focus. 

o PostNuke has an advanced theme engine called Xanthia. This is 
one of the best theme engines with advanced configuration 
options and support for CSS stylesheets. 
oThe Administration Menu is simple, and is well divided into tabs 
for avoiding clutter. 

oThe News Submission module is simple yet powerful. You can post 
a story in parts— the lead in, the main body and the trailing notes! 
o As in PHP-Nuke, you can activate or de-active the various mod- 
ules and blocks according to your needs. 
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o There are as many as 36 language packs available for PostNuke 
for localisation. This feature is useful if you’re looking at devel- 
oping a non-English Web site. 



PostNuke’s pre-installation check 


8.5.3 Installation 

1. Download the latest 
version of PostNuke 
from http://www.post- 
nuke.com. We recom- 
mend you use Win 
Rar to extract the 
archive on Windows. 

2. After extracting the 

archive, copy the con- 
tents of the “html” 
folder to a new folder 
“postnuke”. Place 
this “postnulce” fold- 
er in the “www” 
directory in 

C:\ProgramFiles 
\EasyPHPx-x\ 

3. Now point your 
browser to http:// 
localhost/postnulce/ 
install.php. You 

should get the initial PostNuke installation page. Select your 
language and click on “Set Language”. PostNuke will now run an 
installation check. Click Continue. 



4. You will be presented with a page asking for the server details. 
In “Username” enter “root” and leave the “Password” field 
blank. In the “Database Name” field enter “postnukedb”. Click 
Submit. If you entered all the details correctly, you will be taken 
to another page. Here, review the information you entered, and 
click on “New Installation”. 
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5. You will now be presented with the “New Install” page. At the 

bottom, check “Create the Database” and click on “Start”. 

6. The installer will create the database for you. Now, you will need 
to enter personal details for the administration account. After 
you have entered the details, click on “Set Login”. 

7. That’s about it— the installation of PostNuke is complete! Now, 
log in to your new site and start modifying it by logging into the 
Administration menu. However, you will need to delete the 
install.php file and the “install” folder from C:\Program 
Files\EasyPHPx-x\www\postnuke before logging into the admin 
panel, for security reasons. 

8.5.4 Resources 

Over the years, PostNuke has developed into a mature CMS and has 
quite a few support sites that offer tools for modifying PostNuke. 

Community .Postnuke.com offers a comprehensive list of mod- 
ules, themes and blocks for customising your PostNuke 
installation. 

PostNuke.ru is a resource site for PostNuke that offers some use- 
ful modules. It is quite popular among the PostNuke community. 

Postnuke.lexebus.net is a very good site that offers themes for 
PostNuke. In addition to this, they offer blocks and modules. 

Vulkan24.com/vulkan.de/ is the Web site of Vulkan, a market 
leader in the manufacturing of power couplings. They’ve used 
PostNuke as a CMS for their site. 

It-shop.t-com.de is an online shopping Web site powered by 
PostNuke. 
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8.6 Joomla 


8.6.1 Introduction 

A relatively new CMS, Joomla has taken the CMS industry by 
storm. Based on Mambo, it is elegant and extremely easy to use. 

It is classified as open source software and is licensed under 
the terms of the GPL. It can be downloaded free of cost from joom- 
la.org, and the current version is 1.0.8. According to the develop- 
ers, Joomla 2.0.0 will be completely re-written with PHP5. 

Joomla came into existence as a result of a dispute between the 
developers of Mambo. Miro Corporation, which held the trade- 
mark for the name Mambo, came together with a bulk of the core 
developers to form Joomla. They registered a non-profit organisa- 
tion to fund the project and to protect it from lawsuits. 

Joomla is the phonetic spelling of the Swahili word Jumla, 
which means “together.” 

8.6.2 Features 

Being largely based on Mambo, Joomla has a similar set of fea- 
tures. However, it stands out due to certain key features: 

o Like Mambo, Joomla looks like just another HTML site. So, the 
customisation required for Joomla is limited. 
oThe news and article management system is the most advanced, 
with a fully-featured WYSIWYG editor integrated with options 
to add tables, flash content and advanced HTML content, 
o There is an option to add Metadata to each news story, which is 
a very useful option and helps in enhancing search engine rank- 
ings. 

o Joomla features an advanced caching system that helps in 
improving performance on busy sites. 
oAn RSS management system is built into Joomla, and you can use 
it to provide news feeds from your site, 
o The Theme Engine is a wonderful addition— a lot of elegant 
themes are available. 
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8.6.3 Installation 

1. Download the latest version of Joomla from www.joomla.org. 
We recommend using WinRar to extract the archive on Windows. 
Copy the extracted contents to a new folder “joomla”. Place this 
folder in the “www” directory in C:\Program Files\EasyPHPx-x\. 

2. From now on, the installation is quite simple. Point your brows- 
er to http://localhost/joomla/. Joomla will now run a pre-instal- 
lation check. After this, you can go ahead and install Joomla. 

4. After Joomla runs the pre-installation check, click the Next 
button at the top of the page. Now enter the details about the 
local server. 

5. Under “Host 
Name”, enter 
“localhost”, then 
enter your MySQL 
user name, i.e., 

“root”, and leave 
the MySQL pass- 
word field blank. 

Enter the data- 
base name as 
“joomladb”. Click 
Next. If you entered all the details correctly, the installer will 
proceed to the next step. 

6. At the next page, you’ll need to confirm the Web site details. 
Here, the URL should be http://localhost/joomla and the Path 
should be C:\Program Files\EasyPHPx-x\www\joomla. Enter 
your e-mail ID and administration password as well. 

7. If you followed all the instructions correctly, your installation of 
Joomla should be complete! Now click on the “Administration” 
link, enter your details, and start modifying your site! 



Joomla’s installation Wizard runs the pre-install check 
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8.6.4 Resources 

Since Joomla was formed after the development team at Mambo 
split up, quite a few of Mambo resource sites decided to convert 
themselves into Joomla resource sites. 

Joomlart.com provides free as well as paid themes and a few 
extensions for Joomla. The themes are elegant and are popular 
within the community. 

Joomlashack.com is another theme site that offers both free as 
well as paid themes for the Joomla CMS. 

Mamboportal.com is a very popular Joomla modification site 
that offers useful modules and themes for Joomla. 

Pychotka.pl is a popular Polish cooking site made in Joomla. 

Hausgarten.net is a German gardening site powered by Joomla. 

8.7 Drupal 


8.7.1 Introduction 

Arguably the second-most popular CMS after PHP-Nuke, Drupal 
was essentially a blogging engine. But over the years it has evolved 
into a fully-featured content management system. It is developed 
and maintained by a group of independent developers. It is offered 
free on Drupal.org, and the current version is 4.7.1. 

Drupal was originally written as a bulletin board system by 
Dries Buytaert. “Drupal” is the English spelling of the Dutch word 
“Druppel,” which means a drop of water. It is released under the 
terms of the GPL. The Drupal core offers excellent protection 
against security threats, which is ideal for small businesses as well 
as independent developers. Due to its flexible interface, features 
and ease of use, many popular sites use Drupal as their base. 


142 


SEE FAST TRACK 




CONTENT MANAGEMENT 
SYSTEMS 


VIII 


WEB DESIGN 


8.7.2 Features 

Over the years, Drupal has gained most of the features that a CMS 

has, and today, it is on par with other CMSes as regards features: 

o One of the unique selling points of Drupal is its theme engine. 
It offers a lot of options for customising each theme. Drupal is 
known to be a very flexible CMS, and there are quite a lot of 
themes available for customising your Drupal installation. 

o The module management system in Drupal is pretty simple and 
offers you options to enable, disable or update the different 
modules available. 

o It offers a comprehensive Content Creation system that offers 
various input formats, authoring and publishing options. 

o You can restrict access to parts of your site through the Access 
Control system. You can also set Access Rules and Roles. 

o There is a useful comments management system wherein you can 
approve, modify and delete comments made on your Web site. 

8.7.3 Installation 

1. Download the latest version of Drupal from www.drupal.org. 
Extract the archive using WinRar or WinZip. 

2. Copy the extracted contents to a new folder called “drupal”. 
Place this folder in the “www” directory in C:\Program 
Files\EasyPHPx-x\ 

3. You’ll have to create a database using PhpMyAdmin. Go to 
http://localhost/mysql/. In the main PhpMyAdmin menu, under 
“Create new database”, enter the database name “drupaldb” 
and click on “Create”. 

4. Under the “drupaldb” data- 
base, click on SQL on the top 
bar. Under the sub-heading 
“Location of the textfile”, 
click Browse and select the 
“database.4.1.mysql” file, 
which is located in 
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“C:\Program Files\EasyPHPx-x\www\drupal\database\”. Then 
click on “GO”. 


5. In the next step, you’ll have to edit the configuration file to enter 
details about your server. Go to “C:\Program Files\ EasyPHPxx 
\www\drupal\sites\ default” and edit the file “settings.php”. In 
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Drupal’s Administration Panel 


this file, in the field “$db_url”, enter “mysql://root:@localhost 
/drupaldb” (without the quotes), “root” being your MySQL user- 
name and “drupaldb” being the database name. 

6. The installation part is now complete. Point your browser to 
http://localhost/drupal/. To begin with, you will have to create an 
admin account. Click on “Create the First Account” on the home 
page of your Drupal installation. Now login into Drupal and 
start customising your site from the admin menu! 

8.7.4 Resources 

Like other popular CMSes, Drupal has quite a few resource sites. 
Also, a lot of popular sites are powered by Drupal. 

Themes.drupal.org offers a comprehensive list of free themes 
for Drupal. These themes are elegant as well as light, which is one 
of the reasons for Drupal’s popularity. 

For users who would want to customise Drupal, http://dru- 
pal.org/project/Modules offers a lot of useful modules for modify- 
ing the CMS. 

SpreadFirefox.com, the home of Firefox community market- 
ing, is powered by Drupal. 


144 


SEE FAST TRACK 





CONTENT MANAGEMENT 
SYSTEMS 


VIII 


WEB DESIGN 


TheOnion.com, the popular faux news site, is based on Drupal 
and shows the extent to which this CMS can be modified. 

ProjectOpus.com, a music download site, uses Drupal as its base. 


8.8 XOOPS 


8.8.1 Introduction 

XOOPS is a free Content Management System released under the 
terms of the GPL. XOOPS can be freely modified, distributed and used 
under the terms of the GPL. It was initially developed as a portal sys- 
tem, but over the years, it has developed into a proper Content 
Management System. 

XOOPS is an acronym for extensible Object Oriented Portal 
System. It can serve as a Web framework for use by small, medium 
and large sites. According to XOOPS.org, XOOPS is pronounced 
“Zoops.” It is maintained and developed by the XOOPS 
Foundation, a non-profit organization. 

8.8.2 Features 

Another modular CMS, XOOPS has developed into a fully featured 
CMS over the years. It offers a clean and elegant environment and 
offers quite a few unique features: 

o XOOPS offers one of the best Module Administration systems. 
The interface is icon-based, and you need to install the modules 
according to your requirements. 

o The XOOPS Download Manager is quite comprehensive and 
offers options for submitting content, reporting broken links 
and other such options. You can further modify and tweak the 
download manager from the Preferences menu, 
o XOOPS has a basic Bulletin Board module bundled. This module 
is useful for those looking to offer basic support to the cus- 
tomers on their site. 

o However, one wishes that the developers would improve upon 
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the News Management system, which lacks on features that are 
supported by other popular CMSes. 

o XOOPS features a useful Web Links system wherein users can 
add, submit and rate various Web sites. 

8.8.3 Installation 

1. Download the latest version of XOOPS from www.xoops.prg 
Extract the downloaded archive. You can use WinRar or Winzip. 

2. After extracting the 
archive, you will get 
three folders named 
“html”, “extras” and 
“docs”. Copy the con- 
tents of the “html” fold- 
er into a new folder The XOOPS installation Wizard 
called “xoops”. Place 

this folder in the “www” directory in C:\Program 
Files\EasyPHPx-x\. 

3. Now, point your browser to http://localhost/xoops/. You will get 
the XOOPS installation wizard. Select your language and click 
Next. XOOPS will run a pre-installation check. Click Next again. 

4. Here you will be presented with the General Configuration 
Wizard. Enter the database username as “root” and leave the pass- 
word field blank. In the Database Name field, enter “xoopsdb”. 
The wizard will automati- 
cally detect physical and 
virtual Paths. Click Next. 


5. The wizard will save the 
data you entered to the 
configuration file, and it 
will attempt to create a 
database. Click Next. 

Enter your server information carefully 
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6. After the database creation, you will get a page where you’ll 
need to enter your personal details for creation of the adminis- 
tration account. Enter your details and click Next. 

7. Installation is complete! Log in into your site using the admin 
account you just created and start modifying your site front the 
Administration Menu. 

8.8.4 Resources 

XOOPS has a large and enthusiastic community with quite a few 
sites offering themes, modules and other utilities. 

Xoops-tips.com is a site that offers tips and tricks to make your 
XOOPS installation that little bit better. 

Another site that offers XOOPS modules and themes is 
Xoopsfactory.com. 

AstonThemes.com is a Web site that specialises in XOOPS 
themes. 

Drackouniverse.com is a fantasy novel Web site powered by 
XOOPS. 

Buzaulive.ro, a Web site on the city Buzau, sports a XOOPS 
installation with an elegant look. 


8.9 PHP-Fusion 


8.9.1 Introduction 

PHP-Fusion is not as big or popular as other content management 
systems. But it still is one of the best free CMSes available. It is an 
extremely light CMS, which does not miss out on any features. The 
interface is minimal and elegant. It has been developed by Nick 
Jones in PHP and utilizes MySQL as a database system for the con- 
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tents. It is offered free at php-fusion.co.uk, the current version is 
6.00.307, and the roadmap for the future looks solid. 

Being a relatively small CMS, the community has bound 
together tightly and offers comprehensive support to people will- 
ing to use PHP-Fusion for developing their Web site. 

8.9.2 Features 

PHP-Fusion is a very simple CMS. It is specifically meant for people 
who want to keep their site light, simple and feature-rich. 

o Being a modular content management system, you can turn on 
and off various parts of PHP-Fusion. 
o PHP-Fusion offers a pretty basic Article Management system. 
This is ideal for people who would want to post news on their 
Web site without too much formatting, 
o It is one of the few content management systems that offers an 
integrated Photo Album system. You can add categories, scale 
images, and display your photos on the main page using the 
photo album module. 

o There is a comprehensive User Administration system offered by 
PHP-Fusion wherein you can create user groups, modify users, 
blacklist and ban troublemakers, and give privileges to groups, 
o The Administration Menu is very simple and is divided into 
three parts— Content Admin, System Admin and User Admin. 

8.9.3 Installation 

1. Download the latest version of PHP-Fusion from http://php- 
fusion.co.uk. You will need WinRar to extract the archive on 
Windows. 

2. After extracting the archive, you will get quite a few files and 
folders. Copy the contents of the “php-files” folder into a new 
folder “fusion”. Place this folder in the “www” directory in 
C:\Program Files\EasyPHPx-x\. 

3. You will need to create a database for PHP-Fusion using 
PhpMyAdmin. Go to http://localhost/mysql/. In the main 
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PhpMyAdmin menu, under “Create new database”, enter the 
database name— “fusiondb”— and click Create. 

4. Now point your browser 
to http://localhost/ 
fusion/. The installation 
script will run the pre- 
installation check. In 
the next step, you will 
have to enter details 
about your server. In 
Database Username 
enter “root” and leave 
the Database Password 
field blank. Enter 
“fusiondb” as the 
Database Name. Ensure you’ve entered all details correctly. To 
continue, click Next. 

5. If you entered all infor- 
mation correctly, the 
installer will create the 
database tables in the 
“fusiondb” database. 

You will now be asked to 
enter details about your 
Super Admin account, 
which will be used to 
administer your PHP- 
Fusion installation. 

After entering your 
details, click Next. 

6. If all goes well, the 
installation part will be 
complete. Point your 
browser to http://local- 



Creating the Admin account 
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host/fusion/ to view your very own PHP-Fusion installation. For 
security reasons, delete “setup.php” from “C:\Program Files\ 
EasyPHPx-x\ www\fusion”. 

7. Log in into PHP-Fusion and start modifying your site using the 
Admin Panel. PHP-Fusion is very flexible and offers a lot of options. 

8.9.4 Resources 

Being a smaller CMS, PHP-Fusion does not have the kind of 
resource sites a bigger and more popular CMS would have. But, 
despite being limited, the modules and themes available for this 
CMS are excellent. 

www.PhpFusion-Themes.com is a resource site for PHP-Fusion 
that offers simple, elegant themes for the CMS. 

www.PhpFusion-Mods.com is a site that offers useful modules 
and hacks for PHP-Fusion. 

www.Cruisejournals.com is a community Web site powered by 
PHP-Fusion. 

www.Web-bureau.com is a site that offers tips, articles and 
tutorials on how to make a great Web site. This site uses PHP- 
Fusion as its CMS. 

8.10 el07 


8.10.1 Introduction 

el07 is another popular CMS widely used for developing Web sites. 
It is released under the terms of the GPL. 

The requirements for el07 are Apache, MySQL (3.23 and above) 
and PHP (4.3.0 and above). The developers recommend using 
Apache as the Web server, though any Web server supporting 
MySQL and PHP should work. The current version offered is 0.7.5. 
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The el07 community offers comprehensive support to users 
through their forums, wiki and FAQ. site. 

8.10.2 Features 

Like Joomla, el07 looks just like an HTML site, and requires very 
little customisation. It can be used out of the box and has quite a 
few key features. 

o The Administration Panel is neat and offers quite a lot of infor- 
mation about your el07 installation, 
o The Content Creation system is quite comprehensive and offers 
lots of options. Although the WYSIWYG editor is not as feature 
rich as that of Mambo or Joomla, the plethora of options make 
up for it. 

o The Theme Manager is another useful feature el07 offers. It is 
one of the few theme managers that provides a thumbnail view 
of the theme. Though it’s a simple feature, many CMSes miss it. 
o el07 offers a Banner Rotation system for the advertisements on 
your site. There are various options relating to banner display, 
which are very useful in daily use. 
o The Download Manager is again a very useful feature. You can 
categorise downloads, set or update limits, create mirrors and 
do much more! 


In addition to the above features, various forum systems can be 
integrated with el07 using plugins available on their site. Overall, 
el07 is one of the best CMSes available with several unique features. 

8.10.3 Installation 

1. Download the latest version of el07 from http://el07.org. You 
will need to extract the el07 archive. You can use WinZip or 
WinRar for this purpose. 

2. After you extract the archive, copy the extracted contents to a 
new folder called “el07”. Place this folder in the “www” direc- 
tory in C:\Program Files\EasyPHPx-x\. 

3. Installation from here becomes pretty simple. Point your brows- 
er to http://localhost/el07/ and you will be presented with an 
installation Wizard. Select your language and click Next. 
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4. In this step, you will 
have to enter details 
about your server. In the 
MySQL Username field, 
enter “root”, and leave 
the MySQL password 
field blank. MySQL 
Database will be 
“el07db”, and check the 
“Create” box next to this 
field. Click Continue at 
the bottom of the page. 

5. After running an instal- 
lation check, the 
installer will ask you for 
the Administrator 
account details. Enter 
your details and click 
Continue. However, do 
remember the informa- 
tion you entered, as this 
account will be used for 
managing your site. 

6. If you entered all the information correctly, the installation part 
will be complete. You will be re-directed to your el07 Web site. 
Go ahead and customise it! 


8.10.4 Resources 

There are quite a few sites 
offering themes, modifica- 
tions and other utilities 
for el07. 

http://el07themes.com 
offers a variety of free, ele- 
gant themes for el07. 



Your ready-to-go el07 Web site! 



Enter your server details here 



Remember the Admin details you enter here 
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www.el07coders.org is dedicated to the discussion and cre- 
ation of plugins for the el07 CMS. 

www.el07hacks.org is a site that features useful modules and 
utilities for el07. 

www.el07uk.co.uk is the UK community Web site for this CMS. 

8.11 DragonFly CMS 


8.11.1 Introduction 

DragonFly is another impressive open source CMS. It was previ- 
ously named CPG-Nuke. In those days, it was based on PHP-Nuke 
6.x. The development team has spent quite a bit of time improving 
the features and further optimising the CMS. It is developed by an 
independent group of developers, and is offered for free on cgp- 
nuke.com. The current version is 9.0.6. 1, and it is licensed under 
the terms of the GPL. The basic structure of PHP-Nuke is still 
retained, though it is comes with a completely new cache system, 
a revamped theme system and a complete code rewrite. In the 
early days, it featured the Coppermine Photo Gallery— hence the 
name CPG-Nuke. The requirements include PHP4, MySQL 4.x or 
5.x/PostgreSQL though support for PostgreSQL is still in an experi- 
mental stage. The developers recommend using Apache Web serv- 
er, but other Web servers are supported too. 

8.11.2 Features 

Being originally based on PHP-Nuke, DragonFly shares quite a few 
features with the former. 

o One of the best features of DragonFly is the integration with the 
Coppermine Photo Gallery. Coppermine is considered to be the 
best and most flexible photo gallery and this offers a distinct 
advantage to DragonFly. 

o DragonFly has a site-wide Cache-Based Template System, which 
improves performance on busy sites, 
o DragonFly also features an integrated bulletin board system pow- 
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ered by PhpBB2. As with Coppermine, Dragonfly integrates its 
theme into PhpBB, which is an excellent feature. 

o The developers claim that Dragonfly uses as much as 50 per 
cent fewer database queries as compared to other PHP-Nuke 
derivatives. 

o The News Administration system in DragonFly is a huge improve- 
ment over PHP-Nuke and offers various options such as adding 
of BBCode, HTML, Flash content, and even video files! 

8.11.3 Installation 

1. Download the latest version of DragonFly from 
http://www.cpgnuke .com. You will need WinRar to extract the 
tar.gz archive on Windows. 

2. After you extract the 


Installer 


archive, you will get two 
folders: “documenta- 

tion” and “public_ 
html”. Copy the con- 
tents of the “public_ 
html” folder to a new 
folder called “dragon”. 

Place this folder in the 
“www” directory in C:\Program Files\EasyPHPx-x\. 

3. You will need to create a database for DragonFly. Log in into 
PhpMyAdmin by going to http://localhost/mysql/. In the main 
PhpMyAdmin menu, under “Create new database”, enter the 
database name “dragondb” and click on “Create”. 

4. In this step, you will have to edit the configuration file to enter 
details about your server. Go to C:\Program Files\EasyPHPx- 
x\www\dragon\ and edit the file config.php. Enter “dragondb” 
for Sdbname. Under Sdbuname, enter “root”, since it is your 
PhpMyAdmin username. Let the Sdbpass field remain blank. 

5. The difficult part is over. Now point your browser to http://local- 
host/dragon/install.php. The installer will run a pre-installation 
check. Click on “Let’s build the database” to continue. 



The DragonFly Installer 
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6. After creating the database tables, the installer will present a 
page where you will need to enter information to personalise 
your installation. Enter the site name, administrator e-mail and 
your domain name (“localhost" while installing under EasyPHP). 
Leave the other fields at their default values. 

7. In the next step, you will have to enter your administrator 
account details. Do remember the information you enter, as this 
account will be used to manage your Web site. 

8. If all goes well, your DragonFly installation will be complete. Go 
to http://localhost/dragon/admin.php to modify your Web site. 

8.11.4 Resources 

DragonFly is a relatively new CMS, and the modifications available 
for it are not as many as those available for the more popular CMSes. 

DFMods.com is a site that offers modifications and add-ons. 

A lot of nifty and powerful add-ons for DragonFly are available 
at DFAddons.com 

DFwiki.com is a place to get tools, tricks and tutorials on the 
installation, administration and day-to-day use of DragonFly. 


8.12 CivicSpace 


8.12.1 Introduction 

CivicSpace is a very interesting CMS. It was formerly known as 
DeanSpace and Hack4Deam. The interesting part of this CMS is 
that it was developed to power Web sites supporting the 
Presidential Candidature of Howard Dean in 2004. 

CivicSpace is based on Drupal, which has been under develop- 
ment for more than four years by a community of independent 
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developers. It is developed 
and maintained by 
CivicSpace Labs; the current 
version is 0.8.4. CivicSpace 
can be freely downloaded 
from civicspacelabs.org, and 
is licensed under the terms 
of the GPL. 


CivicSpace requires 
Apache HTTP server 1.3, 

MySQL 4.0.x or 4.1.x, and 
PHP 4.3.3 or greater. 

8.12.2 Features 

Being based on Drupal, CivicSpace shares quite a few features with 
it. However, as mentioned above, CivicSpace has been customised, 
and offers some unique features. 

o CivicSpace is pretty much the only CMS that allows you to chose 
Site Profiles— that is, you can chose between options like a polit- 
ical platform, a personal Web site or a community Web site. 
Your installation will be correspondingly customised, 
o CivicSpace is a powerful Blogging tool. It includes all the fea- 
tures you would expect of a good WYSIWYG editor and it also 
includes options to let your users create their own blogs and 
maintain them. 

o A fully-featured Forum system is integrated into CivicSpace. 
People who would want to provide basic support to customers 
on their site will find this feature useful. 
oLike DragonFly, CivicSpace offers a Photo Gallery system. You can 
also let your users build and maintain their own galleries, 
o Another unique feature of CivicSpace is that it allows users to 
post content through blogging clients, which support XML-RPC 
Blog APIs. So, all you Flock users can now post news on your site 
without even logging on to it! 
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The Admin menu looks similar to that of 
PHP-Nuke 
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8.12.3 Installation 

1. Download the latest version of CivicSpace from www.civicspace- 
labs.org. The CivicSpace archive comes in the .tgz format. We 
recommend you use WinRar for extracting this archive. 

2. After extracting the archive, copy the extracted files and folders 
to a new folder called “civic”. Place this folder in the “www” 
directory in C:\Program Files\EasyPHPx-x\. Now, point your 
browser to http://localhost/mysql/ to log in to PhpMyAdmin. In 
the main PhpMyAdmin menu, under “Create new database”, 
enter the database name “civicdb” and click on “Create”. 

3. Point your browser to http://localhost/civic/install.php. The 
installer will give you an introduction to CivicSpace. Click on 
Begin Installation to proceed to the next step. The installer will 
run a pre-installation check. Click Install to proceed further. 

4. In this step, you will get the option 
of either selecting a “Single site 
setup” or “Multiple site setup”. 

Select “Single site setup”. Check 
“Enable CiviContribute” if you 
want to use CiviCRM, which is an 
open source CMS primarily used for 
fund raising. We will not enable 
CiviCRM for now. Click on “Setup 
database” to continue. 


5. Now, you will be asked to enter the 
database details. Under the user- 
name field, enter “root” and leave the Password field blank. 
Enter “civicdb” as the Database Name. As we will not be 
installing CiviCRM, we will ignore its settings. After this, click 
Create Tables to continue. 

6. After installing the tables, the installer will run a check for file 
permissions. It will give a few warnings about files being 



Enter your server details with 
care 
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“writable”. Ignore that, since we 
are installing on our local server. 

Click on “Skip these checks” to 
continue. 

7. You will now be taken to the 
Civicspace Configuration Wizard. 

In the menu on the left hand side, 
click on “Administrator” and enter 
the details to create an admin 
account. Click on “Basic Settings” 
to personalise your instal- 
lation. Click Next to com- 
plete your installation. 

8. Point your browser to 
http://localhost/civic/ to 
view your own CivicSpace 
installation. Enter your 
login details and modify 
your installation of CivicSpace! 

8.12.4 Resources 

Since CivicSpace is still under development, third-party sites do 
not provide modules, themes and other add-ons yet. However, a lot 
of popular sites use CivicSpace due to its fancy background. 

www.BetterDonkey.org is a site that fights for progressive 
change in Seattle. It is powered by CivicSpace and shows the flexi- 
bility of the interface. 

Another site based on CivicSpace is www.MontclairPost.com, 
an independent forum operated by the members of the Montclair 
Community. 

www.Rideforworldhealth.org is another elegant site based on 
CivicSpace for raising awareness of global health issues. 



Wait! Isn’t this Drupal’s admin menu? 



configuration utility 
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www.ConsultantCommons.org is a site powered by CivicSpace. It 
is a community site for providing non-profit technology support. 

Another impressive site based on CivicSpace is www.OC- 
Tech.org. 

8.13 How To Move Your Site To The Web 
Server 


So, you’ve modified your CMS installation and ironed out the last 
bug? Now, you will have to transfer your Web site to your Web serv- 
er so that your clients can view it. Transferring your Web site to 
your hosting account is pretty simple. 

1. First and foremost, upload the whole CMS folder structure as it 
is. If you are using Joomla, then upload the entire “joomla” fold- 
er to your Web server. 

2. At this point, you’ll have to take a backup of your database from 
PhpMyAdmin. 

3. Now, point your browser to http://localhost/mysql/ to log into 
PhpMyAdmin. In PhpMyAdmin, select your database. Under 
your database, click on “Export” in the top menu bar. This is the 
tab next to “SQL”. You will see a box containing a list of all tables 
in the database. Select all the tables. Under the “Structure” 
option, check the “Add Drop Table” box. 

4. Now, enter the name of the backup file you would like, in “File 
Name template”. Under “Compression”, check the “gzipped” 
box. Click Go. 

5. Save the database file on your computer. We discussed how to 
run a set of SQL queries in PhpMyAdmin under the PHP-Nuke 
installation. Install the database file you just saved onto your 
Web server’s MySQL database in a similar manner. 
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6. Next, you will have to edit the configuration file of your CMS 
and change the database name, username, password, and so on 
to those provided by your Web host. We’ve already discussed 
how to edit a configuration file in the installation guides above. 
The list of files to be edited for the different CMSes is in the 
Notes section (§8.13.1) 

8.13.1 Notes 


CMS File to be edited 

PHP-Nulce 

Mambo 

PostNuke 

Joomla 

Drupal 

XOOPS 

PHP-Fusion 

E107 

DragonFly 

CivicSpace 


config.php 

configuration.php 

config.php 

configuration.php 

settings .php located in /sites/default/ 

mainfile.php 

config.php 

el07_config.php 

config.php 

settings .php located in /sites/default/ 


Unless specifically mentioned, all configuration files are locat- 
ed in the root folder of your CMS installation. 

8.14 A Few Wise Words 


So you’ve uploaded your site, and it is up and running. Hopefully, 
you’ll be getting good traffic. But do remember to install the 
updates that the developers release from time to time. Most of 
these updates are security-related, and if you don’t install these, 
you run a risk of exposing your Web site to the baddies of the 
Internet. All the best with your new site! 
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Forums 
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A Web site seems really professionally done once it has a forum- 
regardless of what people post! Here, we talk about the 
importance and role of forums, and some popular forum 
packages. We also tell you how to set up the forum on your site 
using these tools. 
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9.1 The Value Of Forums 


Forums are one of the most popular forms of online communica- 
tion and idea sharing. A forum is, very simply put, a sort of group 
discussion carried on online, the participants of which form a 
community with common interests. A forum has no rigorous 
organisation, and is the sum total of its members’ contributions. 
The beauty of a forum is that it can be specific or general; forums 
have topic heads, where varying subjects can be discussed, but 
under the proper category. Without actually having to leave the 
safe realm of your desktop, you could exchange shooting tips with 
a photographer from the US and another from Germany, for exam- 
ple. Today there are thousands of forums up and running, with 
members running into the millions! 

Nobody today can afford to miss out on the forum fever that’s 
gripping a sizable chunk of the online community. Some manu- 
facturers also have separate forums on their Web sites; hardcore 
hardware testing authorities such as Tomshardware 
(www.tomshardware.com), Hard OCP (www.hardocp.com), and 
Guru 3D (www.guru3d.com) all have dedicated forums where vis- 
itors can become members and post queries or display their over- 
clocked rigs. Almost every niche Web site will have a dedicated 
forum, and you can find a forum to cater to almost any like, from 
cooking to biking to home decorating. People become members of 
forums because they have interests in common, and can exchange 
ideas or views about a specific topic— a so called “expert opinion,” 
if helpful, will garner respect for the poster of the tip. 

There are also quite a few forums around that organise meets 
for members of say, a particular city, and members are also free to 
exchange personal information, although privately— that is, usual- 
ly not on the forum posts themselves. 

People, therefore, can not only make friends online, but also 
learn and further the knowledge in their fields of interest. If a per- 
son is interested in biking and computer hardware, there will, of 
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course, be a limit to the amount of knowledge he can gain hands- 
on and in his city. If this person were to register on forums, his bik- 
ing and computing experience is so much the richer. He not only 
has access to tips and tricks that members will contribute, but can 
learn from the experiences of others, get insights into what he can 
do better and how, perhaps learn something new, and make like- 
minded friends in the bargain. To top it off, forums are free, as the 
saying goes about some of the best things in life! 

Another example: our very own www.thinkdigit.com/forum 
has members as diverse as you can get— techy geeks, total newbies, 
office-goers looking to enhance productivity, people looking for a 
single solution, and so on. 

Arguments fly back and forth: why substitute the real thing for 
an online personality? Forums feature more informed human 
beings! If knowledge does equate to power, well, read on! 

9.2 Classification Of People On A Forum 


Most people join forums to share experiences, whether general or 
subjective. The simple fact is that a forum is an extension of one 
of our most important necessities— the necessity to communicate: 
our ideas, plans, expertise and dreams. The urge to socialise is 
inherent in all of us. Forums simply extend that sociable instinct 
online, where there is a virtually infinite audience, who partici- 
pate equally— or not so! 

Being an extension of a society— a sort of online society— a 
forum has to have an order of hierarchy. As in real life, some form 
of governance has to prevail, else chaos will ensue. Taking a hard- 
core PC enthusiast forum as an example, a distinction can be 
made based on the regularity of contributions, and of course the 
know-how of the contributor, as below. 
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1. Moderators/Administrators: View these as the mayors and gov- 
ernors. They have extra rights and can ban people based on their 
activities; they basically control the forum, and are supposed to 
be impartial 

2. Forum addicts: The hardcore enthusiasts who live and breathe 
online. They may be on several forums simultaneously, posting 
away to glory 

3. Regulars: The guys/girls who make posting on a forum a regular 
affair, generally log on every day, and are healthy contributors 

4. Occasional visitors: Members who may be online sporadically, may 
log in as often as twice a week, or as infrequently as once a month 

5. Troublemakers: The outlaws of the forum, generally very 
active— even causing trouble is hard work, isn’t it? The Mods are 
always on the lookout to bust such people. Some may have great 
subject knowledge, but just rebel against convention. 

6. One-time visitors: Such members post just once, to solve a prob- 
lem or gain some insight. Not considered to be members by the 
enthusiast and troublemaker categories, who take the pains to 
contribute regularly. 

If you have a Web site with lots of— and possibly diverse— con- 
tent, it’s probably a very good idea to have a forum on it. This will 
dramatically increase traffic to your site, and apart from that, 
make for a more “complete” Web site experience. 

9.3 Forum Packages 


Let’s get going with installing and getting your very own forum up 
and running. Here are some of the most popular forum packages 
for your Web site: 


1. vBulletin 

2. PHPBB 

3. Invision Power Board 
4.SMF (Simple Machines Forum) 
5. Vanilla 
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9.3.1 vBulletin 

vBulletin is a great forum package— one of the most popular forum 
packages, which is surprisingly efficient as well. It’s been written 
completely in PHP. The backend database uses MySQL. Some of the 
salient features of V Bulletin: 

1. It’s scalable, and the database server and Web servers can be dis- 
crete machines. 

2. Utilises MySQL as a backend, which is ultra-light on resources 
and hence fast. 

3. All the advantages of PHP, that is, platform independence, cross- 
platform, and so on. In fact, the main advantage is that it shares 
a very significant trait with PHP— efficiency. 

4. Advanced features for threads such as active users thread show- 
ing, new post indicator via PM, thread subscribing, post rating 
and polling, advanced admin tools for threads such as move, 
edit, delete, lock, quick replies, post previews, advanced text 
and MM signatures, extended smileys, and avatars. 

vBulletin is paid software; a license costs $160 (Approx Rs. 
7200). It’s available for download once you’ve paid and registered, 
with easy-to-follow steps in the online help file. You will need to 
visit the members area, http://members.vbulletin.com, which 
should provide adequate support for even first-time users. 

Once the archive has downloaded, you simply extract it. Note 
that at this point you’ll need to have Easy PHP installed— or PHP, 
MySQL and Apache individually. You should now see two folders in 
your vBulletin directory, namely “do_not_upload” and “upload”. 
The “upload” folder contains the files to be uploaded to your Web 
server. Before uploading, rename the config.php.new file in the 
“includes” folder to “config.php”. The “do_not_upload” folder con- 
tains tools that allow you to perform tasks on the board. There is 
a “tools.php” that has to be uploaded to the “admincp” folder. This 
is an emergency-use only file, and should be deleted immediately 
after use or it will cause a severe security problem. 
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The “config.php” file is the mediator between vBulletin and 
your Web server. Any changes you want can be made here. Be care- 
ful though: we strongly advise you keep a backup of this file in 
case things go wrong. 

Similarly, you can edit the Technical Email Address, Master 
Database Server Name & Port, and the Master Database User Name and 
Password. Note that we haven’t touched the “Slave Database 
Configuration,” assuming there’s a single backend database. 

After editing, the config file has to be uploaded to your Web 
server. Using Smart FTP, which is a free software available from 
www.download.com/3001-2160_4-10543387.html, you can simply 
drag or copy and paste the entire “upload” folder to your Web 
Server. After uploading, you can rename the “upload” folder on 
the Web Server to whatever you want. 


We used vBulletin on the same 
machine, that is, our Web server 
and database server were the same. 
If you’re planning on doing some- 
thing similar, all you need to do is 
copy the entire contents of the 
“upload” directory to the “www” 
folder in your PHP install directory. 

Now we need to actually do 
the vBulletin setup, which will 
be accomplished by typing in the 
full path of the “install.php” file 
in your browser window. For the 
example, we have used we used 
“http://localhost/VB/install/ 
install.php”: once the install file 
runs, you will have to enter your 
registration number, after which 
there are 12 easy-to-follow steps, 



Here’s what you get the first time 
vBulletin is run 



Step 3, showing the creating of the 
various tables used by vBulletin 
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wherein the actual setup is tuned according to your specific 
needs. Very little user input is required, and installation should 
be a breeze. 


In step 9, we input some 
very basic data that largely 
configures what’s displayed 
on every page of the 
forum— such as your title- 
board, homepage, and 
Webmaster e-mail address. 

Just before the last stage 
is complete, it is mandatory 
for you to delete the “con- 
fig.php” file in the /vb/install directory. In fact, the process will not 
complete for security reasons until you manually delete this file. 



In step 9, you configure what is displayed on 
every page of the forum 


In the screenshot along- 
side, we supplied an 
Administrator username 
and password, which 
should be carefully guard- 
ed, and even more so, 
remembered— you get only 
five chances to enter these 
fields correctly, after which 
you’ll be unable to log in for 
15 minutes! 



The Administrator setup. Don’t forget the 
username and password! 


Once you log in using the user- 
name and password you defined ear- 
lier, you will be greeted with a wel- 
come window, which takes a second 
to redirect you to your forum’s home- 
page. You can now create a test post. 
vBulletin is successfully installed! 
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9.3.2 PHPBB (PHP Bulletin Board) 

Like vBulletin, PHPBB is PHP-based, as the name suggests. It is also 
open source, meaning improvements are always a work in 
progress. Flexibility in the backend is a plus point for PHPBB, 
wherein a gamut of choices are available from the now familiar 
MySQL, to MS SQL or even Access/ODBC database servers. 

The best part of PHPBB is that it’s 
a free download; we’ve saved you the 
trouble— find it on this month’s DVD. 

After downloading it, unpack and 
copy and paste the entire “PHPBB” 
folder to your “www” folder. You can 
now type in “http://localhost/ 
phpBB/install/ install.php”, and the 
setup will initialise. PHPBB installation is very fast— no lengthy 
steps. All you need to do is enter the data as we have done in the 
screenshot above and click Start Install. Once it’s installed you need 
to log in, for which you will be prompted for the Administrator user- 
name and password. 

There is a mod for PHPBB called EasyMOD— a must-have if your 
forum runs on PHPBB, because it simplifies the installation of fur- 
ther mods, by replacing the interface with an ease-to-use graphical 
interface. 

Once you get the install window 
alongside, select “This is a Windows 
Server”, since our web server is on 
the same machine as our database, 
so no FTP is required. Selecting FTP 
will bring up another window, 
where the FTP settings need to be 
entered. 

Note that the window shown to the right on the next page is an 
alternative to the one on the left; if you choose “I have ftp access to 



EasyMOD eases the installation 
of later mods 



PHPBB installation is a snap 
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my PHPBB files” in the step above, 
only then will you get this window. 



After this step, you simply need 
to enter an EM password and con- 
firm it. Click and you’re done! 


Easy Mod has been successfully 
Installed 


9.3.3 SMF (Simple Machines Forum) 

This is another free forum 
package based on the ultra- 
light and powerful PHP lan- 
guage, which uses MySQL as 
a backend. It owes its ori- 
gins to replacing YaBB SE, a 
popular forum package 
that ran into problems 
mainly due to resource allo- 
cation. YaBB SE was the PHP 
port of YaBB, but suffered 
the familiar teething problems that most “first-time” software 
packages invariably contain. We won’t go into the benefits of PHP 
all over again; significantly, SMF will always remain free, only the 
license doesn’t permit removal of the copyright notice. Big deal! 



The install window of SMF 


We have provided a copy of SMF on our DVD this month. Or, 
you can find it at www.simplemachines. org. Simply unzip it to a 
folder titled “SMF” (you can use whatever name you want). Now 
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the entire folder is to be 
copied to the “www” folder 
inside EasyPHP. Using 
“localhost / SMF” (where 
SMF is the name of your 
Small Machines Forum 
directory), you should get 
your install window, which 
will look something like 
the screenshot on the previ- 
ous page. 



Creating an account in SMF 


The next window is “ 
where you need to create an * — 

Administrator account— Tr: 
pretty simple really: you 
need to enter your user- 
name, password, and a valid 
e-mail address. Also notice 

that the MySQL database 0 ur new forum-looks nice, doesn’t it? 
password is required, mean- 

H 5 ~ 

ing that unless you know the 
password for the database, 
you cannot create an 
Administrator account— for 
obvious security reasons. An 
admin should, after all, 
know his database password! 



Here’s where the admin controls 
everything! 


Note that SMF very 
helpfully allows you to 
delete the install.php file; 
simply selecting it as an 

option does this. Contrast this with vBulletin and PHPBB, 
where you actually need to manually delete the install.php file. 
Simply click on the link “Your newly installed forum”, and 
voila— your forum homepage appears! 
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Clicking on your admin link will take you to the Administrator 
pane. Note here that in a small window you can see the current 
SMF version. This is the Administrator’s playground from where 
permissions can be allowed or denied, threads created or deleted, 
registering and deleting of members achieved, and where the 
admin exercises all those superpowers we’ve always associated 
admins with! 


9.3.4 Vanilla 

Finally, we take a look at something relatively new, something 
small, built using PHP and of course MySQL: introducing Vanilla, 
which is 100% free and 100% open source. We’ve provided a copy of 
Vanilla on the CD to get you started. It’s also available at http://get- 
vanilla. com. 


Download the .zip file, 
extract it, and copy the 
entire folder (assuming 
you’ve named it “Vanilla”) 
to your “www” folder. In 
your Web browser, you 
need to type in the path to 
the “installer.php” file, 
which should be in the 
Vanilla root directory. But 
there’s a catch here. 
Vanilla actually needs you 
to create a database first 
manually, unlike the other 
forum packages we’ve 
mentioned here. For this, 
go to EasyPHP on your 
taskbar, right-click > 
Administration > Manage 
database, and from here 
the window will look like 
the screenshot alongside. 



Creating a database for Vanilla 



A database called Vanilla has just been 
created 
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Once the “installer, 
php” file is run, your first 
window will look like the 
screenshot alongside. 

You now need to enter 
the SQL Server name 
(“localhost” in our case), 
while the database name 
will be “vanilla” (as we 
specified during creation). 
Finally, you come to the 
Administrator setup, 
where you need to specify 
your admin username and 
password, along with 
other details. 

You’ll now be taken to 
the forum window. 
Explore a bit: you’ll find 
the settings window quite 
interesting— lots of power- 
ful options available here! 
Another popular forum 
package is IPB (Invision 
Power Board), the license 
for which costs $185 
(Rs 8,300). 



The installer file being executed from your 
browser window 



Here’s where you set up the Administrator 
account 



Your new playground: the admin settings 
panel 


There you have it. The tools may be different— take your pick— 
but creating your own forum was never easier! 
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Finishing Up 



I n the previous chapters, you’ve learnt how to build sites. Since 
you’ve done all that on your local machine, it’s time to upload it 
all and test it. In this chapter we’ll show you how you should go 
about making your site go out live to the world and then testing it 
to make sure everything works. We’ll also give you a little insight 
into how to make Google love you, and more! 
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10.1 Hosting Your Own Site 


Once you’re all done designing your site— whether it’s HTML-based 
or runs off of a complete content management system— it’s time to 
let the world see it. Very few of us have broadband-enabled servers 
or computers that are always-on, so you’re probably not going to 
be able to run the site off your own computer. A lot of us want to 
be able to, however, so let’s first look at what we need in order to 
be able to host our own sites on our PCs. 

10.1.1 What you need 

In order to host your own 
site, you will need to have 
a computer with a decent 
configuration, decide on a 
suitable operating system, 

Web server software and, 
of course, a broadband 
pipe that has at least 256 
kilobits per second upload 
speeds— anything slower 
and your site is going to 
crawl! Most ISPs in India are offering 256 Kbps connections, but 
this is the maximum download speed you will get, not the upload 
speed. You can either ask your ISP what the cap on your upload 
speeds is, or just run one of the many bandwidth tests we will talk 
about a little later on. For now, you can go to www.bandwidth- 
place. com and run their speed test. 

We have come across instances where ISPs only put a cap on 
your download speeds and leave the upload speeds open as per 
usage. What this means is that although some of you might have 
a speed cap of 256 kbps in terms of downloads, you might find 
that your uploads are unrestricted. Don’t count on this happen- 
ing, though: most ISPs restrict both upload and download speeds, 
and in fact, you are more likely to find that your upload speeds are 
limited to 128 or even 64 Kbps! 
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The best way to test 
your speeds is to make 
your site live and ask a 
friend with a broadband 
connection to help you 
test it. Perhaps the sim- 
plest way to get a site up is 
to use EasyPHP, as we’ve 
mentioned earlier in this 
book. You can just use 
EasyPHP as your Web serv- 
er, even if your site is 
HTML-based and not PHP/MySQL-based, because all you need to do 
is place all the files in the “.\EasyPHP\www\” directory and then 
go to http://localhost/ to check it. 

Now, for a friend to be able to help you test it, you need to have 
an IP address. A lot of ISPs will not give you a public IP address (an 
IP that’s accessible from the Internet), so if your ISP is one of those, 
you’re out of luck. If you do have a public IP address, however, you 
can go ahead and host your site. 

10.1.2 Getting set to host 

In order to find your IP address, visit www.whatsmyip.org or 
www.shomyip.com and 
note down your IP. If you 
go to whatsmyip.org, click 
on your IP address on the 
top (it’s a link) to see more 
information about your IP 
and your ISP. 


Now, you have to figure 
out whether you IP 
changes or not, so it’s best 
to call up your ISP’s help 
desk and find this out. If it 



Check your IP at whatismyip.org 
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does, you will need to get 
some software that auto- 
matically changes the DNS 
records to point to a single 
URL, so that your site will 
always be accessible. 
Thankfully, there are many 
such software and services 
that are totally free. 


Since changes in a Top 
Level Domain (TLD) take 
quite some time to be 
updated, it’s best that you use a service such as www.no-ip.com, 
get a yoursite.no-ip.com sub-domain, and then use a free DNS serv- 
ice such as ZoneEdit.com to Web-forward www.yoursite.com to 
yoursite.no-ip.com with the option to mask. Yes, this may sound 
like Greek to some, but we’ll explain it all. 

When you buy a domain from a registrar, it assigns its own 
name servers for your site. A name server is what tells someone try- 
ing to visit www.yoursite.com where that person’s browser should 
go. This is generally something like pointing http://localhost/ to 
http://127.0.0.1/. Without any name servers, no browser would 
know which IP or page to go to when you type in a URL. Now, since 
there are millions of Web sites online, and only 13 root servers 
across the globe, those 13 servers cannot handle all the traffic of 
the Internet. So, many other DNS servers keep log records of 
domains and their resolved IP addresses, and only connect to a 
root server after quite some time to update their records. There are 
even further sub-categories of DNS servers which connect to the 
servers that connect to the root, and so on. So, as you can imagine, 
with the sheer amount of DNS servers that are online talking to 
each other, it can take days before a TLD DNS record is updated. 

For sub-domains, such as yoursite.no-ip.com, the TLD is no-ip.com, 
and this never changes— so whenever someone types in yoursite.no- 
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ip.com, they are sent to the 
no-ip.com name servers, 
which contain the most up- 
to-date IP for your computer. 

This is because no-ip.com 
gives you a client software 
that runs as a service on your 
PC and automatically 
updates your IP as soon as 
you’re connected to the Net. 

As long as you keep your computer online, yoursite.no-ip.com will 
point to it, and anyone will be able to access it using that URL. 

However, you have paid for a domain, and don’t really want to 
have no-ip’s name associated with your site, even if you are using 
their services for free— it’s not as cool as www.yoursite.com! After 
you’ve set up your computer to point to a fixed URL in no-ip.com (or 
any similar service), go to www.zoneedit.com and register yourself 
and your domain there for DNS services. ZoneEdit is a completely 
free service for up to five domains (TLDs), and for the life of us we 
cannot figure their business model, because they don’t advertise or 
anything, but we sure are thankful for their services! 

Anyway, once you have registered and added your domain name 
to ZoneEdit, you will be given two ZoneEdit name servers (like 
nsl2.zoneedit.com and nsl5.zoneedit.com) for your domain. You will 
need to go to your registrar’s site (where you bought your domain) 
and change the name servers to the ones ZoneEdit gives you. 

You should set a “Web forward” from ZoneEdit to your dynam- 
ic DNS providers sub-domain (e.g. yoursite.no-ip.com) for both 
www.yourdomain.com and yourdomain.com as well. In a few 
hours at the maximum, you should be able to access your com- 
puter by typing in www.yourdomain.com, as should everyone else 
in the world! Just make sure you don’t remove the dynamic DNS 
updater’s client software from Startup or services and that you’re 
always connected to the Net. 



Use no-ip to always point a subdomain to 
your dynamic IP 
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10.2 Uploading Your Site 


If you’ve decided to get 
hosting instead of hosting 
your own site, you will 
first need to go through 
the very first chapter in 
this book to understand 
how to choose a hosting 
provider. You will also 
find various plans, and at 
various prices, or might 
even find free ad-supported hosting. If you’re OK with ad-support- 
ed free hosting— where an advertisement is placed on your site by 
the hosting provider— first check to look for offers from your reg- 
istrar itself. GoDaddy.com, for example, is one of the world’s 
biggest registrars, and provides free ad-supported hosting with e- 
mail as well with every domain purchase* 

* This is a current offer subject to change. 

The choice is yours, and once you’ve bought hosting, you need 
to upload your site from your computer to the Web server. In order 
to do this, you will need an FTP client, or else you might end up 
losing a connection after 98 per cent is uploaded, and have to do 
it all over again— it’s happened to people! 

Now, FTP clients are a 
dime a dozen, and 
there’s no real “best” 
software in this category. 

However, you will find 
many free and paid 
options, and to be hon- 
est, we think paying for 
an FTP client, no matter 
how many features it 
claims to offer, is a com- 



AceFTP Freeware will allow you to upload 
files and folders recursively 
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plete waste of money. Just make sure you look for one very 
important feature: uploading “folders recursively”! What this 
means is that if you drag a folder from your local computer to 
transfer it to your FTP server, it will upload the folder and all its 
sub-folders and files in the exact same folder and file structure 
as it is on your local machine. 

We use AceFTP 3 Freeware (www.visicommedia.com/down- 
load) ourselves, and you should try it. Remember, there’s an 
AceFTP Pro version also, so make sure you download the “AceFTP 
Freeware” version! 

Once you have your FTP client installed, use the username 
and password that your hosting provider gave you and connect 
from within the client to your site and upload everything in 
your local Web site’s root directory to the root directory of the 
Web server. If you’re using EasyPHP and have your site in a fold- 
er called, say, “Site,” you should upload everything in the “Site” 
folder on your local hard drive (exactly the way it is) to your Web 
server’s root folder (most often the folder that the FTP client 
connects to). 

If you are using a PHP/MySQL-based site, you will also need to 
take an SQL dump from your local site and upload it to your Web 
server’s MySQL database. The dump will be in a *.sql format, and 
you can go to your server’s SQL admin (phpMyAdmin for example) 
interface and upload the *.sql file. 
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10.3 Testing The Site 


Once your site is uploaded, you can navigate to it and start going 
through it to make sure everything is OK. The reason you have 
to check your site is that very often, when transferring the site 
from your local machine to a Web server, links get skewed. You 
might have uploaded a few files into the wrong folder, or a few 
files might not have uploaded properly (or at all). If you built 
your own HTML site with a Web page editor, especially a site that 
has over 40 pages, you might have missed a link or two which 
point to something on your local hard drive instead of a relative 
link to a folder. This means that you have a few images or links 
on your site that point to something like “C:\Documents and 
Settings\ Administrator\My Documents\My Webs\Site\abc. 
html” instead of just “/abc.html”. As a result, it’s obvious that 
you’re going to get a “404 Page Not Found” error when you click 
on that link. This is why you need to check each and every link, 
image and page for errors. 

However, if you have a site that’s close to a hundred pages, or 
runs on a CMS, chances are you’ll be too bored to check all those hun- 
dreds of pages, or will end up wasting too much bandwidth. It’s just 
simpler to let a robot do all the work for you! Head over to www.dead- 
links.com and type in the URL of your site. Now click “Launch the spi- 
der,” sit back, and wait for it to finish its job. The site’s tool has a 
timeout of 45 minutes, but your site will probably be checked way 
before that. If it’s not done by then, you have built a site that’s large 
enough to be a portal, and you should seriously consider paying for 
some of the more professional sitechecking tools! 

10.3.1 Standards 

In order to check and make sure that your site conforms to 
most common Web standards, you should visit http://uitest.com 
and enter your site’s URL. You will get a multitude of options 
and tests, including one which will show you how the Google 
spider views your site and how it will show up as a Google 
search result. 
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Advanced users can 
use the W3C standards 
test that’s also avail- 
able at http:// 
uitest.com. In fact, 
there are so many tests 
at this site that you can 
spend a day there tak- 
ing them all! The 
W3C’s official validator 
is available at http://val- 
idator.w3 .org / 

10.3.2 Browsers 

The next thing you need to do is install as many popular browsers 
as you can and check your site with all of them. Look for format- 
ting problems, skewed colours and the like. This will most often 
happen when there is some error in your code, or your code is not 
W3C-compatible. You should also get a feel for navigation links 
and whether the JavaScript (if any) on your pages is causing prob- 
lems, or if it is an image or text highlighting that doesn’t display 
properly, etc. At the very least, make sure you test your site with 
Internet Explorer, Firefox and Opera. 

10.3.3 Other tools 

If you apply gzip compression to your Web pages, you will have 
smaller file sizes and faster loading time. This is a Web server-sup- 
ported feature, so you will first have to make sure your server sup- 
ports gzip compression. You can check this by visiting www. 
whatsmyip.org/mod_gzip_test/. 

For more tools than you’ll ever need, visit www.softwareqat- 
est.com/qatwebl.html. Some of the tests here are a little old or do 
not exist, but over 90 per cent still work. 

Once you’re done tweaking your site, you should then look at 
it for search engine optimisation. 


UITest.com # 

High Quality Web Resourt rs 


Site Check Results 
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Use sites such as UlTest to test your site 
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10.4 SEO— Search Engine Optimisation 


We have already covered search engine optimisation in our 
November 2005 issue (page 117). We will just list a few basic dos 
and don’ts here: 

1. Content is all-important. Make sure your content mentions the 
words you want to optimise for often throughout your pages. 
For example, if you want to optimise for the words “India tech- 
nology news,” make sure these three words occur often in the 
text, as near as possible to each other. Make sense of the content 
as well; just typing the keywords over and over again for no rea- 
son will get you blacklisted by Google and other search engines. 

2. Fill your keywords into the title tag of the page. 

3. Use them in your meta tags as well. 

4. Make sure every image has “Alt” text associated with it so you 
can show up on image searches as well. 

5. Name your images descriptively. For example, try not to call 
your logo image “logo.gif.” Instead, call it something like “digit- 
magazine.gif’ so that search engines will give it some love when 
searching for images. 

6. Last but not least, don’t wait for a search engine to find you. Tell 
it about your site by submitting your URL. Also make sure to sub- 
mit your URL to as many search engines as possible. 

Once you’re done with all this, you will have finally succeeded 
in becoming a Web designer— all you now need is practice, and you 
can improve upon your skills! 
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Resources 



L ooking at what people have done never hurts. It always helps to 
observe, learn and assimilate as much as one can about the 
subject when one is either just beginning, or is a seasoned pro. 
Here are some good starting points— Web sites designed well and 
not-so-well. Look, observe, learn! 
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11.1 Dos And Don’ts: The Dos 


Like any Bollywood producer will tell you, “We all need a little 
‘inspiration’ once in a while,” obviously referring to the script of a 
hit Hollywood production. And just like our counterparts in the 
entertainment industry, we too could do with a little “inspiration” 
when it comes to Web design. Here are some exceptionally well- 
designed Web sites that just might inspire you to create a smash- 
ing Web site! 

11.1.1 Neave (www.neave.com) 

Paul Neave’s Web site has 
been around for over five 
years now, and is an 
object study in the use of 
Flash to give a Web site a 
life of its own. Taking 
interactivity to a whole 
new level, Mr Neave’s Web 
site is a personal project 
essentially intended to 
show off what a little 
knowledge of Flash, a lit- 
tle sense of style and a little time can do for a Web site. The site has 
loads of fun stuff to do. Neave has his own Flash version of the very 
popular Google Earth (aptly titled Flash Earth), but the most inter- 
esting section is the section called Imagination which is basically 
like doodling on paper, except much, much neater. Awesome! 

Design Lesson: Symmetry. Flowing lines and curves that are easy 
on the eyes. 

11.1.2 Orisinal (www.ferryhalim.com/orisinal/) 

Orisinal is the brainchild of designer Ferry Halim. Like Neave, it, 
too, is Flash-based, and almost all the content is Flash-centric. 
Orisinal games are sometimes naively simple, but are always fun 
to play. The Web page is clean and has scroll-over “light up” but- 



Let your imagination, and your mouse, 
run wild! 
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tons, with descriptions of 
the games at the bottom 
of the page. Simple fonts 
and easy colours make it 
a pleasurable experience 
to browse. 

Design Lesson: Simplicity. 

Follow the golden rule: 
when in doubt, simplify. 

11.1.3 Nokia (www.nokia.com) 

Mobile phone manufacturer Nokia proves once again that user 
interactivity is at the top of their agenda. Not usually a Web site 
one would visit just for the heck of it, Nokia’s Web presence is 
almost as ubiquitous as their mobile counterpart. They have pages 
for every model of cell phone, in almost every country in which the 
model is available. The Web sites themselves are Flash wonders that 
beautifully guide you through phone features and specifications. 

Design Lesson: Functionality. Get to the point as quickly as possi- 
ble. The fewer the clicks, the better. 

11.1.4 Atom Films (www.atomfilms.com) 

For long the home of Flash 
films on the Internet, 

Atom Films is a library of 
some awesome creativity, 
and some pretty bored 
minds. The site is very 
easy to navigate and has 
links and buttons well- 
classified. The best part 
about the site navigation 
is that one can never get 
lost, despite there being 
tons and tons of content. 



Atom Films has very well-classified buttons 
and links 



Original games will keep you occupied during 
boring office days 
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Design Lesson: The easier the site is to navigate, the less the 
headache of getting to which section one wants to go to. 

11.1.5 Modesty Panel (www.m 0 dest 5 fpanel.com) 

Another personal experiment in Web design, Modesty Panel is the 
showcase of Margaret Nissen, whose passion for photography and 
quizzes this site brings 
out beautifully. There is 
not as much to do at this 
Web site as there is to see. 

The “Home” menu is sim- 
ple, and the style flows to 
the other menus as well. 

Colours are used brilliant- 
ly at MP, and the same 
template is used consis- 
tently in all sections. 

Design Lesson: Colours can be both very appealing and very disas- 
trous. Be careful while using uncommon colours, ensuring that 
the text is easily visible over the background. 

11.1.6 xBhp (www.xBhp.com) 

Not technically one of the best-looking sites on the Internet, we 
chose xBhp more as an example of an Indian site that does its job 
well. If you’re a biking enthusiast in India, xBhp is your destination 
for biking advice, chats, 
discussions, and a whole 
lot of other interesting bik- 
ing stuff. The best part 
about xBhp is that every 
design element on the 
Web site sticks to the cen- 
tral theme— biking. 

Design Lesson: Stick to 
the subject of the Web site 



xBhp is a lesson in thinking straight and 
showing it! 
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when giving it design elements. Flower buttons won’t do on a Web 
site about a nuclear holocaust. 

11.1.7 10 by 10 (www.tenbyten.org/10xl0.html) 

Taking news reporting to 
a whole new level, 10 by 10 
is the work of developer 
Jonathan Harris. 

Essentially, 10 by 10 scours 
the web for RSS feeds from 
news Web sites and puts 
up a ten by ten matrix of 
the most popular news 
pictures and stories. Its 
interface is based on 
Flash, and one can identi- 
fy a story by scrolling over the grid of pictures. Even with so much 
content (a hundred pictures) on a single page, the stories are easy 
to find and select. 

11.1.8 Mind (http://data.a-icard.com/mind) 

Mind is a project that 
analyses world trends and 
sorts out the top 100 in an 
easily accessible menu 
that shows, by category, 
stories related to move- 
ments in world business, 
technology and human 
lifestyle. Clicking on the 
“articles” menu of the 
homepage takes you to 
the 100 stories that the Web site has identified as trend-defining. 
One can sort stories by category and even search within stories. 

Design Lesson: It is always a good idea to use a font family when 
designing a Web page. 



Free your Mind, and the clutter of regular 
news sites 



Pictures, pictures everywhere, and stories so 
easy to select 
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11.1.9 What is a Print (www.moma.org/whatisaprint) 

WIAP is an exhibition of 
the Museum of Modern 
Art that describes the evo- 
lution of the printing 
press, starting from the 
earliest forms of printing. 

The Web site has good 
illustrations and extreme- 
ly easy navigation, which 
makes it a pleasure to 
click and learn. There is 
also some fun Flash interactivity that really helps one understand 
the subject matter of the site in depth. 

Design Lesson: Illustrations are an efficient way to make a point 
when words just won’t do it. 

11.1.10 Well-designed Blogs 

For all our blogger buddies, here are some neat blogs to check out 
and get some pointers from. 

11.1.10.1 Andi Smith (www.andismith.com) 

Londoner Andi Smith’s blog is exactly what a blog should be— 
him. The easy-loading images and fonts, combined with Smith’s 
own personal style make it a fun read, and more importantly, 
it’s a blog that won’t make you wonder why the writer is such 
a loser. 

11.1.10.2 My Life With Bad English (http://mylifewithbadenglish. 
blogspot.com/) 

MLWBE is the vlog (video blog) of Andrei Litvinov, who is coming 
to grips with America and the English Language. If you are a 
casual blogger, you will know what a difference it makes to a 
blog just by having your own images on it rather than the regu- 
lar templates. 



Learning has never been so much fun! 


188 


EMI FAST TRACK 






RESOURCES 


XI 


WEB DESIGN 



Your blog has to be YOU! 


11.2 Dos And Don’ts: The Don’ts 


It’s always easy telling people what to do. However, telling them 
the other side of the story is a different ball game. Here’s a short 
introduction to a few design disasters that you should avoid while 
designing your Web site. 


11.2.1 Clutter 

Like we’ve mentioned, 
simplicity is the most effi- 
cient way of getting a 
point across. Too much 
text and too many links is 
information overload, and 
frankly, one has nowhere 
to go but to another site. If 
you must have dozens of 
links on your site, make 
sure they are classified in 
sections for easy navigation. 



Rediff-dear God, what were they thinking? 
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11.2.2 Different font sizes 

For text content that is of a similar nature, that is, headers, foot- 
ers, and body text, don’t mess with the font sizes. If one header is 
a size 14 bold, make sure all your other headers are size 14 bold. 
Also, don’t mess with the text formatting. If the body text for one 
section is left aligned, it is better to keep the body text of similar 
sections also left aligned. And obviously, get your grammar right. 

11.2.3 Too many GIFs, moving 
elements 

Yes, yes we know moving smi- 
leys are cool, but it is not neces- 
sary to have your whole page 
full of them. GIFs also take 
longer to load, and can just put 
people off. It is also not advis- 
able to replace text with GIFs or 
other animations, as this is often confusing— and selection of 
obscure and unclear images will leave people wondering what the 
hell it was they clicked on. 

11.2.4 Flash follies 

Flash is a brilliant design-content tool for your Web site, but there is 
a tendency to overuse it. Too much Flash in places where simple HTML 
would have done the trick is, well, simply annoying. Also, there are 
some finer points that one should keep in mind when designing in 
Flash. Like having a Skip Intro button if your site has a Flash intro. Or 
having a Sound On/Off button if there is background music. 

11.2.5 Uncommon link colours 

It’s not a good idea to use non-standard colours for links. 
Obviously, one must colour visited and unvisited links separately, 
the latter being decidedly brighter than the former. Blues and 
greens are generally accepted colours for unvisited links, while 
reds and purples suit visited links best. Not underlining links is 
another cause of user irritation as one has to guess or scrub the 
page for a link. 
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11.2.6 No pop-ups! 

First off, unless you’re design- 
ing a porn site, or one with 
plenty of advertisements, even 
the thought of a pop-up should- 
n’t cross your mind. Opening 
clicked links in new windows, 
or opening new windows auto- 
matically, must be avoided 
unless absolutely necessary. 

And these days, browsers pretty efficiently block pop-ups, so it 
becomes a pointless exercise anyway. 

11.2.7 No Archives, No Repeat Visitors 

Especially for personal Web pages, it is a bad idea not to have your 
work archived for easy reference. Blog hosts usually provide this func- 
tionality within the blog template itself, but if you’re designing your 
own from scratch, make sure people can access your old gems easily. 

11.2.8 Horizontal scrolling 

Since the inception of the Internet and Web sites, users have 
become accustomed to scrolling top-to-bottom on Web pages. Very 
rarely has one ever had to scroll left to right for anything unless 
it’s a large image. And this is one trend that one must keep in 
mind while designing a Web site. Also, make sure your site is opti- 
mised for standard-sized windows (the standards keep changing, 
but 800 x 600 is generally considered OK). 

11.2.9 Forget long URLs— people will! 

There’s no point having URLs that are more than 30 to 35 charac- 
ters long! Too many dots, dashes, underscores and slashes don’t do 
much more than confuse users, and the people they are giving the 
URL to. Keep your URLs short and related to the subject matter of 
the Web pages they link to. 

11.2.10 The Four-Second Rule 

If one cannot figure out what the site is about within four seconds 



In true Times style, indiatimes has ads 
everywhere 
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of looking at the loaded web page, the site has most probably 
failed to make an impression on the user. Make sure the content 
on your Web site is crisp and to the point, otherwise the user will 
wonder where he’s turned up. 

11.3 Useful Sites 


There are dozens of Web sites that give you a great starting point 
to start your journey into Web designing. Here are a few we 
thought you should check out. 

11.3.1 Web Design Library 
(www.webdesign.org) 

The Web Design Library, as the 
name suggests, is a collection 
of several tutorials and articles 
on anything and everything 
related to Web design. From 
HTML to Vector Graphics, the 
Library is a storehouse of some 
very easy to understand and 
follow advice and tips and 
tricks about Web design. The Web Design Basics section is a great 
place to do some reading up before starting to design your own site. 
Beginners and pros alike are sure to find something here. 



WDL features easy tutorials and 
informative articles 


11.3.2 Web Developer’s 
Handbook 

(www.alvit.de/handbook/) 
Like the tagline aptly puts 
it, the Web Developer’s 
Handbook is about “devel- 
oping Web sites, exploring 
own imagination.” More for 
someone who knows a bit 
about Web designing 



Links! More importantly, links that work! 
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already, WDH is more than just a handbook on Web designing. 
It’s more like a one-stop shop for everything a web designer is 
looking for. Links are divided by convenient and crisp sections. 
A must-visit if you know you’re looking for something, but don’t 
exactly know what it is. 

11.3.3 Use IT 
(www.useit.com) 

Use IT is Web guru Jakob 
Nielsen’s Web site on 
“useable information 
technology.” This is a 
great place to learn if one 
is developing a Web site 
for a company. Nielsen 
has loads of experience 
consulting on Web usabil- 
ity, and shares this on his Web site. There are some great tips a devel- 
oper can get here for B2C and B2B Web sites. His Alertbox Columns 
are gems of information on how to make Web sites more user- 
friendly, and how to make sure one gets the right return-on-invest- 
ment for one’s Web site. 

11.3.4 CSS Zen Garden (www.csszengarden.com) 

For anyone hung up on 
CSS, this is definitely the 
place to visit. The Zen 
Garden is an attempt to 
get CSS taken seriously 
by Web design artists. 

Basically, the site allows 
CSS artists to develop 
CSS stylesheets. A bril- 
liant example of their 
work is seen by clicking 
the “Select a Design” links, which change the design of the 
homepage! 



Select a stylesheet and see the power of CSS! 



Learn more about usability at useit.com 
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11.3.5 Web Pages That Suck (www.webpagesthatsuck.com) 
It’s always great to 
learn from your own 
mistakes, but it’s defi- 
nitely more fun, and 
less expensive, to learn 
from the mistakes of 
others! WPTS is guide to 
what your Web site 
shouldn’t be like if it 
wants to get popular. A 

great place for commonly-made mistakes in Web design. 
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